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HTML5 和 CSS3。 虽 然 HTML5 和 CSS3 还 没有 成 为 W3C 的 推 
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内 容 提 要 

















本 书 是 讲解 HTML 和 CSS 入 门 知 识 的 经 典 畅销 书 ， 如 今 已 经 更 新 到 第 7 版 ， 介 绍 时 下 相当 热门 的 


们 的 大 部 分 特性 。 


解 了 视频 、 
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本 书 不 仅 介绍 

















音频 及 其 他 新 增 特 怕 














荐 标准 ， 但 主流 浏览 器 已 经 能 够 很 好 地 支持 它 


了 文本 、 图 像 、 链 接 、 列 表 、 表 格 、 表 单 、 多 媒体 等 网 页 元 素 ， 也 介绍 了 如 何 为 网 页 设 
计 结 构 、 布 局 ， 添 加 动态 效果 、 格 式 化 等 形式 ， 此 外 还 涉及 调试 和 发 布 、 聚 合 和 吸引 访问 等 。 书 中 详细 讲 





E， 从 零 开始 教会 读者 创建 渐进 增强 的 普 适 














本 书 适合 网 站 设计 新 手 和 专业 开发 人 员 学 习 参 考 。 


图 灵 程 序 设计 从 书 





性 网 站 。 书 中 提供 了 大 量 代 码 示 


附 上 代码 实现 的 屏幕 截图 ， 配 套 网 站 上 列 出 了 完整 的 示例 代码 及 更 多 实例 。 
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图 灵 公 司 出 版 《HTML XHTML CSS 基 础 教程 (第 6 版 ) 》。 那 本 书 正 是 当年 我 学 习 


Web 设 计 与 开发 的 入 门 书 。 不 过 ， 当 时 的 我 完全 不 曾 想到 自己 会 成 为 该 书 下 一 版 的 译 者 。 五 年 过 去 了 ， 








今 非 苦 比 ， 互 联网 的 发 
已 更 新 至 HTML5，CSS 也 改进 为 CSS3， 














展 日 新 月 异 ， 而 作为 网 页 基础 的 HTML 与 CSS 技 术 也 在 不 断 “ 变 革 ”。HTML 
虽然 两 者 还 未 成 为 网 页 构建 新 标准 ， 但 这 只 是 时 间 的 问题 ， 








况且 主流 浏览 需 对 绝 大 多 数 新 特性 已 经 支持 良好 。 如 今 ， 这 套 经 典 教程 也 更 名 为 《HTML5 与 CSS3 基 








础 教程 (第 7 版 ) 》， 重 出 江湖 S 




















i 讲解 时 下 炙手可热 的 HTML5 与 CSS3 技 术 。 
HTML ( 超 文本 标记 语言 ) 是 少 有 的 在 名 称 中 包含 “语言 ” 








一 词 的 常见 语言 ， 然 而 讽刺 的 是 ， 











很 多 人 都 认为 HTML 算 不 上 是 一 门 计算 机 语言 
CSS ( 层 车 样式 表 ) 则 是 另 一 种 与 网 页 有 关 的 语 
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PP 隐 含 的 意思 则 是 HTML 不 需要 花费 工夫 学 习 ) 。 


它 同 HTMIL 一样 简单 易学 ， 在 很 多 人 有 眼 里 也 是 不 


值 一 学 的 技术 。 尽 管 HTML 和 CSS 学 起 来 都 不 难 ， 但 它们 毕竟 是 万 维 网 的 基础 ， 是 每 一 名 Web 设 计 和 
开发 人 员 都 要 掌握 的 技术 。 实 际 上 ，HTML 和 CSS 的 简单 主要 体现 在 模式 单纯 ， 入 门 容易 。 很 多 人 深 
知 这 一 特点 ， 却 忘 了 它们 都 是 知识 点 繁杂 ， 需 要 极其 注重 细节 的 技术 。 最 典型 的 例子 莫 过 于 对 浏览 




















兼容 性 的 追求 。 万 维 




















网 的 普 适 特性 使 得 用 户 的 浏览 环境 注定 不 会 单一 ， 近 年 来 移动 互联 网 的 迅猛 发 展 





又 加 剧 了 这 种 多 样 性 。 有 经 验 的 Web 设 计 和 开发 人 员 都 知道 ， 要 确保 网 页 对 不 同 浏览 器 的 兼容 ， 着 力 














提升 网 站 的 可 用 性 ， 可 不 是 一 件 容 易 的 事 。 
这 本 书 是 广 受 欢迎 的 HTML 与 CSS 经 典 入 门 




















KB, x5 


初 。 这 本 书 从 最 基本 的 HTML 标 记 和 CSS 属 性 讲 起 ， 全 二 





新 至 第 7 版 ， 第 1 版 可 追溯 到 万 维 网 兴起 之 
了 HTML 与 CSS 的 方方面面 。 值 














ij、 透彻 地 介绍 




















得 一 提 的 是 ， 本 书 独特 的 双 栏 版 式 恰当 地 将 代码 输入 步 又、 示例 代码 块 和 效果 
合 HTML 和 CSS 这 种 主题 繁多 但 形式 统一 的 教学 。 此 外 ， 在 本 书 历 版 中 作为 附录 的 HTML 标记 和 CSS 属 
性 完整 列表 向 来 都 是 初学 者 的 重要 参考 资料 ， 它 们 在 这 一 版 中 又 作 了 更 新 ， 相 当 有 价值 。 

与 市 面 上 大 多 数 介绍 HTML5 和 CSS3 的 书 不 同 ， 本 书 并 非 只 讲解 新 技术 ， 而 是 紧密 结合 HTML5 和 
CSS3 的 最 新 规范 和 最 佳 实践 ， 从 基础 讲 起， 构建 了 一 套 全 驮 
开发 引入 了 一 些 新 的 实践 方法 ， 也 让 一 些 做 法 变 得 过 时 。 对 于 初学 者 来 说 ， 这 本 书 可 以 让 他 们 从 一 开 
始 就 学 到 “正确 的 ”做 法 ， 而 不 必 先 学 到 陈旧 的 知识 ， 日 后 再 作 修正 。 在 市 国 
定 能 为 Web 设 计 与 开发 初学 者 带好 启程 之 路 。 


























乏 的 情况 下 ， 这 本 书 的 出 现 也 犹如 雨露 甘霖 ， 
最 后 ， 借 此 机 会 ， 感 谢 











图 灵 公 司 对 我 的 信任 ,感谢 傅 志 红 、 楼 伟 册 、 刘 美英 等 
他 们 的 耐心 指导 和 建议 给 了 我 很 大 帮助 。 感 谢 我 的 父母 ， 他 们 的 支持 与 宽容 总 是 我 开展 任何 











图 示 组 织 在 一 起 ， 很 适 


























的 知识 体系 。HTML5 和 CSS3 的 出 现 为 Web 
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i 上 同类 优质 图 书 相 对 匮 














i 辑 的 细心 工作 ， 


艰苦 工作 





























的 情感 依托 ， 而 他 们 的 健康 与 境 福 则 是 我 最 大 的 费 望 。 
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无 论 你 是 刚 开 始 涉足 网 站 制作 ， 还 是 曾经 做 
过 网 站 、 而 今 又 想 让 自己 的 技能 与 时 俱 进 ， 都 会 
对 这 个 领域 振奋 人 心 的 进展 感同身受 。 

在 过 去 的 几 年 里 ,为 网 页 编写 代码 和 添加 样 
式 的 方式 、 浏 览 网 页 所 用 的 浏览 絮 以 及 使 用 浏览 器 
的 设备 都 发 生 了 明显 的 变化 。 曾 经 ， 我 们 只 能 通 
过 台式 机 或 笔记 本 浏览 万 维 网 ， 而 如 今 我 们 可 以 
通过 很 多 设备 访问 万 维 网 : 手机 、 平 板 电脑 ， 当 
然 也 包括 笔记 本 、 人 台式 机 ， 以 及 更 多 别 的 设备 。 

这 是 意料 之 中 的 事 ， 因 为 万 维 网 始终 秉持 消 
除 边界 的 宗旨 ， 无 论 在 城市 还 是 在 乡村 ， 通 过 任 
何 能 访问 万 维 网 的 设备 ， 任 何人 都 可 以 自由 地 分 
享 和 获取 信息 。 总 之 ， 万维网 的 宗旨 是 普 适 性 。 
万 维 网 的 覆盖 范围 不 断 扩 大 ， 过 去 ， 通 信 技 术 还 
未 曾 普及 到 农村 ， 而 现在 却 已 经 实现 了 。 

万 维 网 的 伟大 之 处 还 在 于 每 个 人 都 可 以 自 
地 创建 和 发 布 网 站 。 本 书 正 是 没有 任何 HTML 
和 CSS 知 识 的 建站 初学 者 的 理想 教程 ， 将 指导 读 
者 创建 和 发 布 网 站 。 书 中 内 容 结构 清晰 ， 浅 显 易 
懂 ， 将 一 步 一 步 地 教会 你 如 何 创建 网 页 。 总 之 ， 
本 书 是 开发 人 员 手 头 案 边 的 必 备 指南 ， 若 想 了 解 
某 个 主题 更 多 信息 ， 通 过 查找 目录 可 以 直接 跳 到 
相关 页 面 。 










































































































































































HTML 和 CSS 简介 


万 维 网 成 功 的 根基 ， 是 一 种 基于 文本 的 标 
记 语 言 一 一 HTML， 它 简单 易学 ， 并 且 能 被 任何 








了 中 


带 有 基本 Web 浏 览 器 的 设备 识 读 。 每 个 网 页 都 至 
少 用 一 点 儿 HITML ， 和 否则 也 就 不 能 称 为 网 页 了 。 

随 着 学 习 的 深入 细致， 你 会 了 解 到 ，HTML 
用 于 定义 内 容 的 含义 ， 而 CSS 用 于 定义 内 容 和 网 页 
如 何 显示 。HTML 页 面 和 CSS 文 件 (HRA, style 
sheet ) 都 是 文本 文件 ， 因 此 很 容易 编辑 。 在 下 面 
的 “如 何 使 用 本 书 ” 一 节 ， 你 将 看 到 一 些 HTML 
和 CSS 的 代码 片段 。 

从 第 1 章 起 ， 我 们 开始 学 习 基 本 的 HTML 页 
面 ; 从 第 7 章 起 学 习 用 CSS 定 义 页 面 样式 。 关 于 
本 书 各 章 内 容 概述 及 主题 汇总 ， 请 参见 “本 书 
涉及 内 容 ”。 

1. 什么 是 HTML5 

了 解 一 些 有 关 HTML 起 源 的 基础 知识 对 于 理 
解 HTML5 是 有 帮助 的 。HTML 诞 和 后 于 20 世 纪 90 年 
代 初 ， 用 于 详细 规定 少量 构建 网 页 的 元 素 。 这 些 
元 素 中 的 大 多 数 都 用 于 描述 网 页 内 容 ， 如 标题 、 
有 段落、 列表 等 。 随 着 更 多 元 素 的 引入 以 及 对 语法 
规则 本 身 的 调整 ，HTML 这 门 语言 的 版 本 号 也 在 
更 新 。 当 前 最 新 的 版 本 便 是 HTML5。 

HTML5 是 HTML 早 期 版 本 的 自然 延续 ， 它 尽 
可 能 地 满足 当前 网 站 和 未 来 网 站 的 需求 。 它 从 以 前 
的 版 本 中 继承 了 大 部 分 特性 ， 这 意味 着 ， 如 果 你 
在 HTML5 出 现 之 前 写 过 HTML， 那 么 你 已 经 知道 
很 多 关于 HTML5 的 知识 了 。 这 也 意味 着 ,HTML5 
的 大 部 分 内 容 都 可 以 兼容 新 旧 浏 览 器 ， 癌 后 兼容 
是 HTML5 的 一 项 重要 设计 原则 ( 参见 www.w3.org/ 
TR/html-design-principles/ ) 。 









































































































































HTML5 还 增加 了 不 少 新 功能 。 很 多 新 功能 
都 很 简单 ， 比 如 用 于 描述 内 容 的 辅助 元 素 ( 如 
article, section, 、figure 等 ) 。 还 有 一 些 用 于 
帮助 创建 强大 的 Web 应 用 程序 的 新 功能 则 非常 复 
杂 。 只 有 牢 牢 掌握 了 创建 网 页 的 技能 ， 才 能 去 学 
习 HTML5 更 复杂 的 功能 。HTML5 还 引入 了 原生 
的 音频 和 视频 播放 功能 ， 这 在 本 书 中 也 会 讲 到 。 

2. 什么 是 CSS3 

HTML 诞 生 几 年 后 才 出 现 CSS 的 第 一 个 版 
本 。CSS 于 1996 年 正式 推出 。 同 HTML5 与 其 早期 版 
本 的 关系 一 样 ，CSS3 也 是 CSS 早 期 版 本 的 自然 延续 。 

CSS3 比 CSS 早 期 版 本 更 为 强大 ,， 它 引入 了 大 
量 的 视觉 效果 ， 如 外 阴影 、 文 字 阴 影 、 圆 角 、 源 
变 等 。 (关于 CSS3 涵 盖 的 详细 信息 ， 请 参见 “本 
书 涉及 内 容 ”。 ) 

3. Web 标 准 与 规范 

你 可 能 在 想 ， 是 谁 第 一 个 创造 了 HTML 和 
CSS， 又 是 谁 在 持续 地 发 展 它们 。 由 万 维 网 和 
HTML 的 发 明 者 Tim Berners-Lee 主 持 的 万 维 网 联盟 
(W3C ) 是 负责 带领 Web 标 准 发 展 的 组 织 。 规 范 
(specification, f$ 3 JJspec ) 是 定义 HTML CSS 
等 语言 的 参数 的 文档 。 也 就 是 说 ， 规 范 对 规则 进 
行 了 标准 化 。 要 了 人 解 W3C 的 活动 ， 请 登录 www. 
w3.org ( 见 图 1 ) 。 
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图 1 W3C 的 网 站 是 业内 Web 标 准 规范 的 主要 信息 来 源 


























1 于 各 种 原因 ， 另 一 个 组 织 ，Web 超 文本 应 
用 技术 工作 组 (WHATWG，www.whatwg.org ) ， 
也 在 开发 HTML5 规 范 。W3C 将 WHATWG 的 工作 
纳入 了 其 正在 开发 的 规范 的 正式 版 本 之 中 。 

利用 已 经 完成 的 标准 ， 我 们 可 以 根据 一 套 成 
形 规则 创建 网 页 ， 而 Chrome Firefox, Internet 
Explorer (IE) 、Opera 和 Safari 等 浏览 器 也 能 根据 
这 套 规则 显示 这 些 页 面 。 (整体 上 ， 浏 览 器 对 标 
准 的 支持 是 良好 的 。 正 的 早期 版 本 ， 尤 其 是 IE6， 
则 存在 一 些 问题 。 ) 

经 过 几 个 阶段 的 发 展 ， 规 范 最 终 会 被 确定 
下 来 ， 成 为 推荐 标准 (Recommendation, www. 
w3.0rg/2005/10/Process-20051014/tr ) 。 

WATHTMLSAICSS3JUGS TRI AEQ. fH 
这 并 不 意味 着 你 不 能 使 用 这 些 规范 。 标 准 化 的 过 
程 需要 经 历 一 些 时 间 (准确 地 说 需要 数 年 ) 。 浏 
览 絮 会 在 规范 成 为 推荐 标准 之 前 很 久 便 实现 其 功 
能 ， 这 也 是 规范 发 展 过 程 的 反映 。 因 此 ， 浏 览 絮 
已 经 包括 了 大 量 HTML5 和 CSS3 的 功能 ， 尺 管 它们 
还 没有 成 为 推荐 标准 。 

总 体 上 ， 本 书 涉及 的 功能 都 是 规范 中 较为 明 
规定 的 ， 因 此 它们 在 推荐 标准 推出 之 前 发 生 改 
变 的 可 能 性 极 小 。 很 多 HTML5 和 CSS3 功 能 已 经 
实际 使 用 一 段 时 间 了 ， 你 完全 可 以 放心 使 用 。 


渐进 增强 : 一 种 最 佳 实践 


我 在 前 言 的 开头 处 就 讲 到 了 万 维 网 的 普 适 
性 一 一 万 维 网 上 的 信息 应 该 能 被 所 有 人 访问 。 渐 进 
增强 ( progressive enhancement ) 能 帮助 你 构建 具 
有 普 适 性 的 网 站 。 这 不 是 一 门 语言 ， 而 是 一 种 建站 
方法 ， 它 由 Steve Champeon 于 2003 年 提出 (http:// 
en.wikipedia.org/wiki/Progressive enhancement ) 。 

这 个 想法 很 简单 ， 但 也 很 强大 : 用 所 有 人 都 
能 访问 的 HTML 内 容 和 行为 开始 构建 网 站 ( 参见 
图 2 ; 对 同一 个 页 面 ， 用 CSS 加 入 你 的 设计 CS 
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见 图 3 ) ， 用 JavaScript 添 加 额外 的 行为 。 这 些 CSS 
和 JavaScript 通 常 是 从 外 部 文件 加 载 进 来 的 〈 后 文 
会 讲 到 如 何 做 到 这 些 ) 。 
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The Saint Paul Hospital at the top of Gaudi Avenue in the Sagrada Fama neighborbood is an aft-overionked gem 
of modereist architectare. Although the building was began in 1902 under the direction of the architect Làsis 
Domènec i Montaner, the hospital itself dmes from the 14 century. lt serves same 34.000 inpatients yearly, along 
with more than 150,000 emergency room. 
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图 2 一 个 基本 的 HTML 页 面 ， 未 应 用 任何 自 定义 
的 CSS。 这 个 页 面 可 能 并 不 是 很 好 看 ， 但 信息 都 是 
可 访问 的 ， 这 一 点 非常 重要 。 即 使 是 20 多 年 前 万 维 
网 刚 产 生 时 的 浏览 器 ， 都 能 显示 这 个 页 面 ; 最 早 配 
有 Web 浏 览 器 的 手机 也 能 显示 。 此 外 ， 屏 幕 阅读 
器 (可 以 为 视 障 访问 者 读 出 网 页 的 软件 ) 也 能 轻松 
地 处 理 这 个 页 面 
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图 3 ”同一 个 页 面 在 支持 CSS 的 浏览 器 中 的 显示 效 
果 。 信 息 是 相同 的 ， 只 是 呈现 的 方式 不 同 。 使 用 功 
能 更 强 的 设备 和 浏览 器 访问 这 个 页 面 的 用 户 得 到 了 
增强 的 体验 























这 样 做 的 结果 就 是 ， 那 些 只 能 访问 基本 页 面 
的 设备 和 浏览 器 会 得 到 简化 的 、 默 认 的 体验 ， 而 

















那些 能 够 浏览 更 健壮 的 网 站 的 设备 和 浏览 器 将 看 
到 增强 的 版 本 。 不 必要 求 网 站 对 所 有 人 来 说 体验 
都 是 一 样 的 ， 关 键 是 网 站 的 内 容 是 可 访问 的 。 本 
质 上 ， 渐 进 增强 背后 的 涵义 是 人 人 共 赢 。 

这 本 书 将 会 讲解 如 何 建立 渐进 增强 的 网 站 ， 
但 在 讲述 的 过 程 中 不 会 总 是 把 这 个 词 明 确 地 说 出 
来 。 遵 循 贯 穿 全 书 的 最 佳 实践 ， 自 然 就 能 做 到 浙 
进 增强 。 

不 过 ， 第 12 章 和 第 14 章 明确 强调 了 渐进 增 
强 。 如 果 你 想 了 解 以 下 内 容 ， 可 以 先 阅读 这 两 
章 : 如 何 用 渐进 增强 的 原则 构建 其 布局 能 适应 设 
备 屏 幕 大 小 和 浏览 需 功 能 的 网 站 ， 如 何 让 旧 的 浏 
览 需 显 示 简 化 的 设计 而 现代 浏览 器 显示 包含 CSS3 
效果 的 增强 版 本 。 

渐进 增强 是 构建 人 人 都 能 访问 的 网 站 的 关键 。 


目标 读者 


本 书 假定 读者 没有 任何 做 网 站 的 知识 。 
此 ， 从 这 个 意义 上 说 ， 这 本 书 适合 零 起 点 初学 
者 。 你 将 从 最 基础 的 HTML 和 CSS 知 识 学 起 。 在 
这 个 过 程 中 ， 你 也 会 学 到 HTML5 和 CSS3 的 新 特 
性 ， 尤 其 是 那些 设计 师 和 开发 者 在 日 常 工作 中 
经 常用 到 的 特性 。 

不 过 ， 即 使 你 对 HTML 和 CSS 很 熟悉 ， 依 然 
可 以 阅读 本 书 ， 特 别 是 如 果 你 想 快 速 了 解 HTMLS、 
CSS3 的 大 量 最 新 特性 以 及 最 佳 实践 的 话 。 

1. 本 书 涉及 内 容 

为 了 给 读者 带 来 尽 可 能 多 的 材料 ， 本 书 英文 
原版 比 上 一 版 多 约 125 页 的 内 容 。 (第 1 版 出 版 于 
1996 年 ， 只 有 176 页 。 ) 此 外 ， 我 们 对 上 一 版 几乎 
每 一 页 都 进行 了 大 量 更 新 ( 甚至 完全 重 写 ) 。 总 
之 ,第 7 版 是 一 次 重大 的 修订 。 

全 书 各 章 是 按照 如 下 方式 进行 组 织 的 。 

口 第 1 章 至 第 6 章 及 第 15 章 至 第 18 章 讲解 创建 

HTML 页 面 的 原则 和 你 用 得 上 的 HTML 元 





































































































素 ， 并 清楚 地 说 明 什 么 时 候 该 使 用 ， 以 及 
如 何 使 用 这 些 元 素 。 

a 第 7 章 至 第 14 章 讲解 CSS ， 从 创建 第 一 条 
样式 规则 开始 ， 一 直到 运用 CSS3 增 强 视 
觉 效 果 。 

口 第 19 章 演示 如 何 向 页 面 添加 预先 写 好 的 

JavaScript. 

a 第 20 章 讲解 在 把 页 面 放 到 万 维 网 上 之 前 

如 何 对 其 进行 测试 和 调试 。 

口 第 21 章 讲解 如 何 保护 自己 的 域名 ， 以 及 
如 何 把 网 站 放 到 万 维 网 上 让 其 他 所 有 人 
都 能 看 到 。 

C 附录 A 和 附录 B， 其 中 附录 A 列 出 了 HTML 

全 局 属性 、HTML 元 素 及 其 属性 ; 附录 B 

列 出 了 CSS 属 性 及 其 值 。 这 些 内 容 可 供 读 

者 快速 查阅 。 































































































部 分 主题 内 容 如 下 。 

OQ 创建 、 保 存 、 编 辑 HTML 和 CSS 文 件 。 

口 编写 语义 化 HTML 的 含义 及 其 重要 性 。 

O 如 何 把 页 面 内 容 ( 即 HTML ) 和 呈现 (B 

CSS) 分 开 (这 是 渐进 增强 的 关键 要 素 ) 。 

口 通过 一 种 有 含义 的 方式 ， 使 用 那些 存在 
多 年 的 HTML5 和 新 增 的 HTML 元 素 对 内 
容 进 行 结构 化 。 

口 使 用 ARIA 地 标 角 色 和 其 他 好 的 编码 实践 

提升 网 站 的 可 访问 性 。 

口 在 页 面 中 添加 图 片 ， 并 针对 万 维 网 对 其 

进行 优化 。 

口 从 一 个 网 页 链接 到 男 一 个 网 页 ， 或 从 页 

面 的 一 部 分 链接 到 另 一 部 分 。 

口 为 文字 添加 样式 (大 小 、 颜 色 、 粗 体 、 
斜体 等 ) ; 添加 背景 颜色 和 背景 图 片 ; 
实现 浮动 的 多 栏 布 局 ， 这 种 布局 可 根据 
不 同 的 屏幕 尺寸 缩小 或 放大 。 

口 充分 利用 CSS3 中 新 的 选择 器 。 这 些 新 的 选 
择 器 提供 了 更 多 定位 样式 的 方法 。 













































































口 学 习 为 移动 设备 访问 者 准备 网 页 。 

O 基于 许多 响应 式 Web 设 计 原 则 ( 其 中 的 
一 些 影响 了 CSS3 媒 体 查询 ) ， 为 所 有 用 
户 创 建 单一 网 站 ， 不 管 他 们 使 用 的 是 手 
机 、 平 板 电脑 、 笔 记 本 、 人 台式 机 ， 还 是 
其 他 能 访问 万 维 网 的 设备 。 

口 使 用 @font-face 为 页 面 添加 自 定义 的 Web 

字体 。 

O 应 用 CSS3 效 果 ， 如 透明 度 、 背 景 alpha 透 
明 、 渐 变 、 圆 角 、 外 阴影 、 内 阴影 、 文 
字 阴 影 以 及 多 背景 图 片 。 

口 创建 用 于 获取 访问 者 输入 内 容 的 表单 ， 包 

括 使 用 一 些 HTML5 中 新 增 的 输入 类 型 。 

O 使 用 HTML5 的 audio 和 video 元 素 向 页 面 
插入 媒体 。 

当然 ， 还 有 很 多 。 

这 些 主题 都 配 有 众多 代码 示例 ， 说 明 如 何 基于 
















































































业内 最 佳 实践 来 实现 HTML5 和 CSS3 的 各 个 特性 。 


2. 本 书 未 涉及 内 容 
唉 ， 尽管 比 起 上 一 版 ,我 们 新 增 了 许多 内 容 ， 





但 还 是 不 得 不 舍弃 很 多 其 他 的 HTML 和 CSS3 





EU, 


除了 几 处 例外 ,我 们 坚持 把 那些 极 少 用 
到 、 仍 可 能 变化 、 缺 乏 广 泛 浏 览 吉 支持 或 者 需要 
JavaScript 知 识 的 主题 ， 以 及 一 些 高 级 主题 排除 在 








本 书 范围 以 外 。 


本 书 没 有 涉及 下 列 主题 。 

口 HIMLS 的 details、summary menu, 

command 和 keygen 元 素 。 

O HTML5 的 canvas 元 素 ， 它 让 你 可 以 使 用 

JavaScript 绘 制图 像 ( 其 至 创建 游戏 ) 。 

口 需要 JavaScript 知 识 或 者 与 HTML5 新 增 的 
语义 化 元 素 没有 直接 关联 的 HTML5 API 和 
其 他 高 级 特性 。 

口 CSS 精 灵 。 这 项 技术 可 以 将 多 张 图 片 拼合 
成 一 张 图 片 ， 这 有 助 于 减少 页 面 对 需 要 加 
载 的 资源 的 请 求 数 。 更 多 信息 请 参见 www. 


bruceontheloose.com/sprites/ 
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口 CSS 图 片 奉 换 。 这 项 技术 通 党 与 CSS 精 灵 
一 起 使 用 。 更 多 信息 请 
theloose.com/ir/。 

O CSS3 变 换 、 动 画 和 过 渡 效 果 。 

口 CSS3 中 新 的 布局 模型 。 





参见 www.bruceon- 











如 何 使 用 本 书 


本 书 几乎 所 有 章节 都 有 演示 真实 用 法 的 代码 
示例 (参见 图 4 和 图 5 ) 。 通 常情 况 下 ， 随 后 还 会 
展示 这 些 代 码 对 应 的 页 面 在 浏览 器 中 显示 的 屏幕 
截图 ， 参 见 图 6。 
























































«body» 
«header role-"banner"» 


«nav role-"navigation"» 
«ul class-"nav"» 


«/ul» 
«/nav» 


«/header» 


«/body» 
</html> 





<li><a href="/" class="current">home</a></li> 
<li><a href-"/about/"»about«/a»«/li» 

<li><a href="/resources/">resources</a></li> 
<li><a href-"/archives/"»archives«/a»«/li» 








E4 你 将 在 本 书 很 多 地 方 看 到 HTML 代码 片段 ， 对 应 的 部 分 会 被 突出 显示 。 省 略 号 (… 











: ) 表示 出 于 简洁 目 








的 而 省 略 的 额外 代码 或 内 容 。 通 常 ， 省 略 的 部 分 可 在 其 他 代码 示例 中 看 到 








/* 站 点 导航 */ 
.nav li ( 
float: left; 
font-size: .75em; /* makes the 
bullets smaller */ 
} 


.nav li a ( 
font-size: 1.5em; 


) 


.nav li:first-child ( 
list-style: none; 
padding-left: 0; 





} 











E5 ”如 果 示 例 有 CSS 代 码 ， 它 们 会 单独 显示 ， 对 应 
的 部 分 也 会 突出 显示 





图 6 用 于 演示 代码 如 何 影响 页 面 的 一 种 或 多 种 浏 
览 需 的 屏幕 截图 























大 多 数 屏幕 截图 用 的 都 是 当下 最 新 版 本 的 
Firefox。 不 过 ， 这 并 不 意味 着 ， 与 其 他 浏览 器 相 
比 ， 我 们 更 推荐 Firefox。 本 书 的 代码 示例 在 最 新 
版 本 的 Chrome Internet Explorer 、Opera 和 Safari 
中 看 起 来 都 是 相似 的 。 你 将 在 第 20 章 了 解 到 ， 应 
该 在 不 同 的 浏览 需 中 测试 页 面 ， 因 为 你 无 从 知道 
访问 者 使 用 的 是 什么 浏览 























代码 和 屏幕 截图 中 都 有 对 相应 HTML 元 素 和 
CSS 属 性 的 描述 ， 以 便于 对 示例 的 背景 进行 说 明 ， 
并 加 强 你 对 它们 的 理解 。 

在 很 多 情况 下 ， 你 会 发 现 只 要 理解 说 明和 代 
码 示例 就 可 以 使 用 HTML 和 CSS 特 性 了 。 但 如 果 你 
需要 这 些 特 性 使 用 方法 的 明确 指导 ， 也 可 以 阅读 
书 中 列 出 的 详细 步骤 讲解 。 

最 后 ， 大 部 分 章节 都 有 一 些 提 示 ， 用 于 提供 
额外 的 用 法 信息 、 最 佳 实践 、 对 本 书 相关 部 分 的 
引用 、 对 其 他 资源 的 链接 等 。 



















































































本 书 约定 

本 书 遵循 以 下 约定 。 

O HTML 一 词 通常 泛 指 这 门 语言 。HTML5 
则 用 于 指 代 这 一 特定 版 本 的 HTML， 例 如 
在 讨论 HTML 早 期 版 本 所 没有 的 HTML5 新 
特性 的 时 候 。CSS ( 泛 指 ) 和 CSS3 ( 特 
指 ) 的 用 法 与 之 类 似 。 

口 需要 你 自己 输入 值 的 占 位 符 的 文字 或 代码 
以 斜体 显示 。 大 多 数 占 位 符 出 现在 步 又 讲 
解 中 。 例 如 ，“ 输 入 #zrggbbp， 其 中 rrggbb 
是 颜色 的 十 六 进 制 代码 。” 

口 你 需要 准确 输入 的 代码 ( 即 HTML 和 CSS 

代码 ) 使 用 等 宽 字体 ( 如 this font) 。 

a 代码 图 中 的 箭头 〈 一 ) 代表 延续 上 一 行 的 
代码 (这 一 行 代码 由 于 篇 幅 原因 而 被 折 上 断 
了 ) ， 如 图 $ 所 示 。 箭 头 并 非 代 码 的 一 部 
分 ， 不 需要 输入 。 你 应 该 连续 地 输入 这 一 
行 代码 ， 就 好 像 它 没有 被 折断 。 

口 对 于 需要 定义 的 词 ， 第 一 次 出 现时 会 用 
楷体 显示 。 
























































O IE 是 对 Internet Explorer 的 简称 。 例 如 ， 
IE9 与 Internet Explorer 9 同 义 。 

口 在 浏览 器 的 版 本 号 后 面 出 现 的 加 号 (+ ) 指 
的 是 该 版 本 之 后 的 各 个 版 本 。 例 如 ，Firefox 
8+ 指 的 是 Firefox 8.0 及 其 后 所 有 的 版 本 。 


本 书 配 套 网 站 


本 书 网 站 ( www.bruceontheloose.com/htmlcss/ ) 
上 有 本 书 的 目录 、 本 书 涉及 的 ( 以 及 一 些 额 外 的 
不 适合 放 入 书 中 的 ) 完整 代码 示例 、 引 用 资源 的 
链接 ( 以 及 一 些 额外 资源 的 链接 ) 、 写 作 时 用 做 
参考 的 信息 、 勘 误 表 ， 附 录 A 和 附录 B ， 等 等 。 

www.bruceontheloose.com/htmlcess/examples/ 
列 出 了 所 有 代码 示例 。 你 可 以 在 网 页 上 查看 这 些 
代码 ， 也 可 以 把 它们 下 载 到 你 的 电脑 里 一 一 所 有 
HTML 和 CSS 文 件 你 都 可 以 拿 到 。 

有 时 ， 我 会 在 代码 里 搬入 一 些 额 外 的 注释 ， 
用 以 解释 对 应 代码 的 含义 和 用 法 。 限 于 篇 幅 ， 本 
书 大 量 的 代码 示例 都 有 所 删 减 ， 但 配套 网 站 列 出 
了 完整 的 代码 。 读 者 可 随意 使 用 这 些 代 码 ， 并 对 
它们 进行 修改 ， 使 之 满足 自己 项 目的 需要 。 
























































下 面 是 本 书 网 站 一 些 重要 页 面 的 URL。 


O 主页 : www.bruceontheloose.com/htmlcss/ 











O 代码 示例 : www.bruceontheloose.com/ 
htmlcss/examples/ 

O 附录 A: www.bruceontheloose.com/ref/html/ 
O 附录 B: www.bruceontheloose.com/ref/css/ 
希望 该 网 站 对 你 有 用 。 
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本 章 内 容 

口 基本 HTML 页 面 

口语 义 化 HTML: 有 含义 的 标记 
口 标记 : 元 素 、 属 性 和 值 

口 网 页 的 文本 内 容 

OQ 链接 、 图 像 和 其 他 非 文 本 内 容 
口 文件 名 

Q URL 

口 要 点 回顾 














尽管 网 页 变 得 越 来 越 复 杂 ， 但 是 其 底层 
结构 依然 相当 简单 。 你 应 当知 道 的 第 一 件 事 
就 是 ， 创 建 网 页 都 离 不 开 HIML。 你 即将 了 
解 到 ，HTML 会 包围 内 容 并 说 明 这 些 内 容 表 
示 什 么 ，Web 浏览 器 则 会 将 HTML 包 着 的 内 
FERAH 
一 个 网 页 主要 包括 以 下 三 种 成 分 。 
O 文本 内 容 (text content): 在 页 面 上 
让 访问 者 了 解 页 面 内 容 的 纯 文 字 ， 比 
如 关于 你 的 业务 、 产 品 、 家 庭 度 假 等 
内 容 。 
O 对 其 他 文件 的 引用 (references to other 
files) : 这 些 文件 加 载 图 像 、 音 频 、 视 
频 、SVG "文件 等 ， 指 向 其 他 HTML 








页 面 和 资源 ， 以 及 样式 表 ( 用 于 控制 
页 面 的 布局 ) F JavaScript 文件 ( 用 
于 为 页 面 增加 行为 ) 。 
口 标记 (markup ) : 对 文本 内 容 进 行 描 
述 并 使 引用 正确 地 工作 。 (HTML 一 
词 中 的 字母 M 就 代表 标记 。 ) 
需要 注意 的 是 ， 网 页 的 这 些 成 分 都 仅 由 
文本 构成 。 这 意味 着 网 页 可 以 保存 为 纯 文本 
格式 , 可 以 在 任何 平台 (无 论 是 台式 机 、 手 机 、 
平板 电脑 还 是 其 他 平台 ) 上 用 任何 浏览 器 查 
看 ， 从 而 保证 万 维 网 的 普 适 性 。 同 一 页 面 在 
不 同 的 设备 上 看 起 来 可 能 并 不 一 样 ， 不 过 这 
没关系 。 重 要 的 是 ， 第 一 步 要 让 内 容 对 所 有 
用 户 都 是 可 访问 的 ， 而 HTML 可 以 做 到 这 一 
iH 


IO 











除了 上 述 三 种 主要 成 分 ， 网 页 还 包括 一 
些 其 他 HIML， 它 们 提供 关于 页 面 本 身 的 信 
E, 比如 网 页 内 容 的 主要 语言 ( 英语 、 法 语 等 )、 
字符 编码 (通常 为 UTF-8 ) 等 。 这 些 HTML 
主要 是 为 浏览 器 和 搜索 引 苟 准备 的 ， 用 户 通 
常 是 看 不 见 它们 的 。 

本 章 会 带 你 创建 一 个 基本 的 HTML 页 面 ， 
讨论 一 些 最 佳 实践 ， 并 分 别 阐述 上 述 三 种 主 
要 成 分 。 














(D SVG 是 Scalable Vector Graphic ( 可 缩放 矢量 图 形 ) 的 简称 。 一 一 译 者 注 
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注意 : 正如 在 前 言 中 提 到 的 ， 本 书 使 《 解 HIML， 本 书 接 下 来 的 部 分 会 介绍 更 多 的 


用 HTML 泛 指 这 门 语言 本 身 。 如 果 需 要 突出 HTML 知识 。 
HTML 某 一 版 本 独 有 的 特殊 属性 ， 则 使 用 它 




















?) Blue Flax (Linum lewisii) - Mozilla Firefox 二 人口 | x| 

们 各 自 的 名 称 。 例 如 ，“HTML5 引入 了 一 些 [E ea uen e pon pe e 

I N gps s NES L Blue Flax (Linum lewisi E > 
新 的 元 素 ， 并 重新 定义 或 删除 了 一 些 先前 存 o teen 
JET HTML 4 和 XHTML 1.0 中 的 元 素 。” 更 The Ephemeral Blue Flax 
详细 的 说 明 参 见 前 言 中 的 “如 何 使 用 本 书 ”。 2 
1.1 基本 HTML 页 面 

来 看 一 个 基本 的 HTML 页 面 ， 大 概 了 
解 一 下 本 章 及 后 面 的 内 容 。 图 1.1.1 显示 了 drea: or. astane dido. oeil 
图 1 : 1 2 中 HTML 代 码 在 桌 面 浏 览 器 中 显 示 flower remains by the afternoon. They are the very definition of ephemeral. 





出 来 的 样子 。 我 们 会 讲解 图 1.1.2 中 代码 的 





1.1.1 页 面 典型 的 默认 呈现 效果 。 昌 然 这 是 页 


基础 知识 。 不 过 ， 即 便 你 现在 不 能 完全 理 。 面 在 Firefox 中 显示 的 效果 ， 但 该 页 面 在 其 他 浏览 




















解 这 些 代 码 也 不 必 担 心 ， 这 只 是 让 你 初步 了 器 中 的 效果 也 是 相似 的 





«IDOCTYPE html» 
«html lang-"en"5 
«head» 

«meta charset-"utf-8" /> 

«title»Blue Flax (Linum lewisii)«/title» 
«/head» 
«body» 

«article» 

«hi»The Ephemeral Blue Flax«/hi» 





«img srcz"blueflax.jpg" widthz"300" heightz"175" altz"Blue Flax (Linum lewisii)" 


/> 
<p>I am continually «em»amazed«/em» at the beautiful, delicate «a href="http:// 
> en.wikipedia.org/wiki/Linum lewisii" rel-"external" title-"Learn more about 
Blue 
— Flax"»Blue Flax«/a» that somehow took hold in my garden. They are awash in color every 
— morning, yet not a single flower remains by the afternoon. They are the very definition 
— of ephemeral.«/p» 

«/article» 
«/body» 
</html> 








1.1.2 ”这 是 基本 HTML 页 面 的 代码 。 我 对 HTML 进行 了 突出 显示 ， 这 样 你 就 能 把 它们 与 页 





内 容 区 分 开 来 。 如 图 1.1.1 中 显示 的 那样 ， 包 围 文本 内 容 的 HTML 并 没有 在 浏览 器 中 显示 出 来 。 
门 描述 内 容 的 含义 。 同 时 ， 请 注意 ， 每 行 之 间 都 通过 回 车 符 分 











将 了 解 到 ， 这 些 标记 是 非常 重要 的 ， 因 为 它 
开 了 ， 但 这 并 不 是 必需 的 ， 它 们 并 不 影响 页 面 的 呈现 效果 
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不 过 ， 你 
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你 或 许可 以 猜 出 某 些 代码 的 含义 ， 特 别 
是 body 部 分 的 一 些 代码 。 首 先 看 看 body 之 前 
的 那 一 部 分 代码 。 

在 图 1.1.3 H, «body» 开始 标记 ?以 上 的 
代码 是 为 浏览 器 和 搜索 引擎 准备 的 指导 信息 。 
每 个 网 页 都 以 DOCTYPE 声明 开头 。 该 声明 
用 以 告诉 浏览 器 这 个 页 面 的 HTML 版 本 。 





«IDOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset-"utf-8" /> 
«title»Blue Flax (Linum lewisii) «/title» 


«/head» 











1.4.3 title 元 素 中 的 文本 是 HTML 文档 代码 
顶端 部 分 中 唯一 用 户 可 见 的 部 分 。 其 余 有 关 页 面 的 
宫 息 是 为 浏览 器 和 搜索 引 敬 准备 的 

应 当 始 终 使 用 HTML5 的 DOCTYPE, 
Bl] <!DOCTYPE html>。 代 码 不 区 分 大 小 写 , 但 























«IDOCTYPE html» 
«html lang-"en"» 
ca e RESF] saa 
<body> 
«article» 


«hi»The Ephemeral Blue Flax«/hi» 


«img src-"blueflax.jpg" width-"300" 
> height-"175" alt-"Blue Flax (Linum 
> lewisii)" /» 


<p>I am continually <em>amazed</em> 
— at the beautiful, delicate 
^ «a href-"http://en.wikipedia.org/ 
> wiki/Linum lewisii" rel-"external" 
> title-"Learn more about Blue Flax"> 
— Blue Flax«/a» that somehow took 
— hold in my garden. They are awash 
— in color every morning, yet not a 
> single flower remains by the 
> afternoon. They are the very 
^ definition of ephemeral.«/p» 
«article» 
</body> 
</html> 











DOCTYPE 通常 全 部 使 用 大 写 。 无 论 如 何 ， 页 
面 一 定 要 包含 DOCTYPE ( 更 多 信息 参见 3.1 
节 中 的 “改进 后 的 HTML5 DOCTYPE” ) 。 

从 <!DOCTYPE html> 一 直到 </head> 之 间 
的 部 分 对 用 户 来 说 是 不 可 见 的 ， 除 了 一 处 例 
Ph, BJ «title» FI </title> 之 间 的 文字 一 一 
Blue Flax (Linum lewisii)。 这 部 分 文字 会 作 
为 标题 显示 在 浏览 絮 窗 口 顶 端 和 标签 页 ， 如 
图 1.1.1 所 示 。 此 外 ， 它 们 还 通常 是 浏览 器 书 
签 或 收藏 夹 的 默认 名 称 ， 对 搜索 引擎 来 说 也 
是 很 有 价值 的 信息 。 第 3 章 会 解释 页 面 顶部 
其 他 部 分 的 作用 。 

网 页 的 内 容 C 即 对 用 户 可 见 的 部 分 ) 位 
于 «body» FI </body> 之 间 。 最 后 ，</html> 结 
束 标记 标志 着 页 面 的 结束 ， 如 图 1.1.4 所 示 。 









































1.1.4 ”网 页 的 内 容 位 于 body 元 素 的 开始 标记 和 
结束 标记 之 间 ， 文 档 以 </html> 结 


代码 的 缩 进 与 其 是 否 为 有 效 HTML 4 
无 关系 。 它 也 不 会 影响 内 容 在 浏览 器 中 的 显 
示 效 果 (第 4 章 会 讲 到 ，pre 元 素 是 一 个 例 
BR) 。 不 过 ， 对 和 骸 套 在 父 元 素 里 面 的 代码 进 
行 缩 进 是 一 种 惯例 ， 这 样 做 会 让 你 在 阅读 代 
码 时 更 容易 看 出 元 素 之 间 的 层级 关系 。 本 章 
随后 部 分 会 讲 到 更 多 有 关 父 元 素 和 子 元 素 的 
AH, DAR SE EU Oed] Và de SATA zs HJ TE 
说 明 。 

首先 ， 让 我 们 讨论 一 下 编写 语义 化 
HTML 是 什么 意思 ， 以 及 为 什么 它 是 有 效 网 
站 的 基石 。 














CD 开始 标记 指 的 是 开启 一 个 非 空 元 素 的 一 段 代码 ( 此 处 为 <body> )， 与 结束 标记 对 应 (<body> 对 应 的 结束 标记 为 


</body> ), 参见 1.3 节 。 一 一 译 者 注 
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1.2 ”语义 化 HTML: 有 含义 的 标记 


HTML 是 一 套 精 巧 的 系统 ， 可 以 包含 关 
于 文档 中 内 容 的 信息 。 这 些 信 息 称 做 标记 ， 
用 以 描述 内 容 的 含义 (meaning) ， 即 语义 
(semantics ) 。 基 本 HTML 页 面 中 已 经 出 现 
了 一 些 例子 ， 如 标记 段落 内 容 的 p 元 素 。 

HTML 并 不 定义 内 容 在 浏览 带 应 当 如 何 显 
示 ， 那 是 CSS (Cascading Style Sheet, JEFE 
IR ) 的 事 。HTML5 比 以 往 任何 一 个 版 本 都 
更 加 强调 这 种 区 别 ， 这 是 这 门 语言 的 核心 。 

既然 如 上 所 述 ， 你 或 许 想 知道 为 什么 基 
本 HTML 页面 (如 图 1.2.1 所 示 ) 中 的 一 些 文 
字 比 另 一 些 文字 要 大 一 些 ， 一 些 文字 是 粗 体 
或 斜体 ( 如 图 1.2.2 所 示 ) 。 














«body» 
«article» 
«hi»The Ephemeral Blue Flax</h1> 


«img src-"blueflax.jpg" width-"300" 
— height="175" alt-"Blue Flax (Linum 
—lewisii)' /> 


<p>I am continually «em»amazed«/em» 
— at the beautiful, delicate 

«a href-"http://en.wikipedia.org/ 
— wiki/Linum lewisii" rel-"external" 
— title-"Learn more about Blue Flax"> 
— Blue Flax«/a» that somehow took 

— hold in my garden. They ar awash 
— in color every morning, yet not a 
— single flower remains by the 

— afternoon. They are the very 

— definition of ephemeral.«/p» 


«p»«small»8copy; Blue Flax Society. 
 «/small»«/p» 
«/article» 
«/body» 
</html> 














图 1.2.1 基本 页 面 的 内 容 ， 结 尾 的 地 方 又 加 了 一 
Et. HTML 元 素 并 不 描述 内 容 如 何 显示 ， 只 说 明 内 
容 的 含义 。 内 容 的 默认 显示 样式 是 由 每 个 浏览 器 的 
内 置 样式 表决 定 的 ， 如 图 1.2.2 所 示 








Blue Flax (Linum lewisii) - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 





| 3 Blue Flax (Linum lewisii) 








Iam continually amazed at the beautiful, delicate Blue Flax that somehow took 
hold in my garden. They are awash in color every morning, yet not a single 
flower remains by the afternoon. They are the very definition of ephemeral 
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图 1.2.2 浏览 器 的 默认 样式 表 将 标题 (hl ~ h6 元 
素 ) 与 普通 文本 区 别 开 来 ,对 em 文本 加 上 和 斜体 样式 ， 
对 链接 加 上 颜色 和 下 划 线 。 此 外 ， 有 的 元 素 从 单独 
的 一 行 开始 (如 hl 和 p) ， 而 其 他 一 些 元 素 显 示 
在 外 围 内 容 的 里 面 ( 如 a 和 em) 。 这 个 例子 显示 
了 第 二 个 段落 ( 版权 声 明 ) ， 可 以 清晰 地 看 到 每 个 
段落 占据 单独 的 行 。 用 你 自己 的 样式 表 覆 盖 这 些 显 
示 规 则 是 很 简单 的 

这 是 个 好 问题 。 其 实 ， 原 因 就 是 每 个 
Web 浏览 器 都 有 一 个 内 置 CSS 文件 (一 张 样 
式 表 ) ， 它 决定 了 每 个 HTML 元 素 的 默认 样 
式 ( 你 自己 创建 的 CSS 可 以 覆盖 这 些 样 式 ) 。 
对 于 不 同 的 浏览 器 ， 默 认 样式 会 稍 有 差异 ， 
但 总 体 上 是 相当 一 致 的 。 重 要 的 是 ，HTML 
所 定义 的 内 容 的 底层 结构 和 含义 是 一 致 的 。 


1. 块 级 元 素 、 行 内 元 素 以 及 HTML5 

容易 看 出 ， 有 些 HTML 元 素 (如 article、 
hi 和 p) 各 自 显示 为 单独 的 一 行 ， 就 像 书 里 
的 各 个 段落 一 样 ， 而 男 外 一 些 元 素 ( 如 a 和 
em) 则 与 其 他 内 容 显示 在 同一 行 里 ， 如 图 
1.2.2 所 示 。 这 也 是 浏览 器 的 默认 样式 ， 而 不 
是 HIML 元 素 自 身 的 样式 。 这 里 需要 多 解释 
一 下 。 在 HTMLS 之 前 ， 大 多 数 元 素 都 可 以 划 
人 块 级 (block-level， 显 示 为 单独 的 一 行 ) 或 
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行内 ( inline, 可 以 与 其 他 内 容 在 一 行 并 排 显 示 ) 
两 种 类 别 。HTML5 废弃 了 这 些 术语 ， 因 为 这 
些 术语 把 元 素 与 表现 关联 起 来 了 ， 而 HTML 
并 不 负责 表现 。 

通常 ， 以 前 归 为 行内 元 素 的 在 HTMLS 
中 称 作 短语 内 容 (phasing content) ， 即 主要 
显示 在 一 个 段落 之 内 的 元 素 及 其 包含 的 文本 。 
(第 4 章 专 门 讲解 短语 内 容 ， 完 整 列表 参见 
http://dev.w3.org/html5/spec-author-view/ 





content-models.html//phrasing-content-0, ) 

旧 的 块 级 元 素 也 被 归 人 了 新 的 HTMLS 类 
别 当 中 ， 这 时 强调 的 是 它们 的 语义 功能 。 这 
些 元 素 大 多 用 来 标明 内 容 的 主要 结构 块 和 标 
题 ( 关 于 给 内 容 分 块 和 标明 标题 级 别 的 元 素 ， 
参见 第 3 章 ) 。 

尽管 如 此 ， 浏 览 需 不 需要 也 不 应 该 为 这 
些 元 素 改变 默认 显示 规则 。 毕 竞 ， 你 不 想 看 
到 两 个 段落 (p 元 素 ) 连 到 一 起 ， 或 者 强调 的 
字句 Cem 元素 ) 将 句子 打 断 ， 单 独 成 行 。 

因此 ,通常 标题 、 段 落 和 结构 化 元 素 ( 如 
article ) 显示 在 单独 的 行内 ， 而 短语 内 容 则 
与 外 围 内 容 显示 在 同一 行 。 尽 管 HTML5 不 再 
使 用 块 级 、 行 内 这 些 术语 ， 但 这 样 划 分 有 助 
于 理解 它们 的 含义 。 由 于 在 HTML5 之 前 就 成 
为 HTML 的 常用 词 ， 因 而 这 些 术 语 常见 于 初 
级 教程 当中 。 本 书 也 会 偶尔 使 用 这 些 术语 ， 
以 说 明 元 素 在 默认 情况 下 是 占据 单独 的 行 还 
是 与 其 他 内 容 共 处 一 行 。 
后 续 章 节 将 详细 讲解 CSS， 不 过 现在 只 
需要 知道 ， 样 式 表 与 HTML 一 样 是 纯 文本 ， 
因此 你 可 以 用 编辑 HTML 的 文本 编辑 器 创建 
你 自己 的 样式 表 。 


2. HTML5 强调 语义 

HTMLS 强调 HTML 的 语义 ， 把 所 有 视 
觉 样 式 都 护 给 了 CSS。 但 在 HTML 的 早期 版 
本 中 ， 并 不 总 是 这 样 。 







































































万 维 网 刚刚 诞生 那 会 儿 ， 还 没有 为 网 页 
添加 样式 的 恰当 方法 。 在 CSSI T 1996 年 12 
月 正式 推出 之 前 ,HTML 就 已 经 存在 数 年 了 。 
为 了 填补 当时 那 段 空白 ，HTML 包含 了 大 量 
的 呈现 元 素 ， 这 些 元 素 用 于 给 文本 添加 基本 
的 样式 ， 如 加 粗 、 和 斜体 、 改 变 字号 等 。 

这 些 元 素 在 当时 发 挥 了 作用 ， 但 随 着 
Web 开发 最 佳 实践 的 发 展 ， 它 们 也 理 所 当 
然 地 “失宠 ”了 。 这 其 中 的 核心 观念 就 是 ， 
HTML 只 负责 描述 内 容 的 含义 ， 而 非 表 现 。 

HTML 的 表现 元 素 打 破 了 这 条 最 佳 实践 法 
则 。 因 此 ，HTML4 不 赞成 使 用 它们 ， 而 推荐 创 
建 者 使 用 CSS 对 文本 和 其 他 页 面 元 素 添 加 样式 。 

HTMLS 则 更 进一步 ， 它 取消 了 一 些 表现 
元 素 ， 并 重新 定义 了 其 他 一 些 元 素 ， 使 之 仅 
具有 语义 功能 ， 而 非 控 制 表现 。 

small 元 素 就 是 这 样 一 个 例子 。 起 初 ， 它 
用 于 让 文字 变 得 比 常规 文字 小 一 些 。 然 而 ,在 
HTMLS 中 ，small 代表 条 文 细 则 ， 如 通常 用 小 
字 写 的 法 律 声明 、 免 责 条 款 等 。 当 然 ， 只 要 你 
愿意 ,可 以 使 用 CSS 让 它 成 为 页 面 中 最 大 的 字 ， 
但 这 样 做 不 会 改变 small 内 容 的 含义 。 

同时 ，HTMLS 不 存在 与 small 相对 的 
big 元 素 。 还 有 其 他 的 一 些 例子 ， 你 会 在 本 书 
接 下 来 的 章节 了 解 到 。 

HTMLS 也 定义 了 新 的 元 素 ， 如 header, 
footer, nav, article, section 等 。 它们 可 
以 丰富 内 容 的 语义 ， 后续 章 节 会 详 述 。 

不 过 ， 无 论 是 使 用 从 HTML 这 门 语言 诞 
生起 就 存在 的 元 素 ， 还 是 使 用 HTMLS 的 新 元 
素 ， 目 标 都 应 该 是 一 样 的 : 选择 最 能 表明 内 
容 含义 的 元 素 ， 不 必 关 心 它们 的 表现 。 





















































3. 基本 HTML 页 面 的 语义 

熟悉 了 HTML 的 角色 以 后 ， 下 面 就 进 一 
步 看 看 对 示例 内 容 进 行 标记 的 过 程 。 正 如 你 
所 看 到 的 ， 编 写 语义 化 HTML 并 不 神奇 。 当 
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你 熟悉 了 可 供 使 用 的 元 素 以 后 ， 这 基本 上 就 
是 常识 了 。 下 面 重 温 一 下 基本 页 面 的 body 部 
分 ,看 看 最 常用 的 HIML 元 素 , 如 图 1.2.3 所 示 。 








«body» 
«article» 
«hi»The Ephemeral Blue Flax</h1> 


«img src-"blueflax.jpg" width-"300" 
» heightz"175" alt-"Blue Flax (Linum 
» lewisii)" /> 


<p>I am continually <em>amazed</em> 
— at the beautiful, delicate 
» <a href-"http://en.wikipedia.org/ 
» wiki/Linum lewisii" rel-"external" 
> title="Learn more about Blue Flax"> 
— Blue Flax«/a» that somehow took 
— hold in my garden. They are awash 
— in color every morning, yet 
*not a single flower remains by 
>the afternoon. They are the very 
» definition of ephemeral.«/p» 
«/article» 
«/body» 














1.2.8 ”基本 页 面 的 body， 它 包含 article, h1, 
img, p, em 和 a 元素 以 描述 内 容 的 含义 。 所 有 的 内 
RRETH article 中 

所 有 的 内 容 都 包含 在 一 个 article 元 素 
E, HAZ, article 定义 了 一 段 独立 的 内 容 。 
要 包围 基本 页 面 内 容 ，article 是 个 不 错 的 选 
择 ,， 但 不 是 每 个 页 面 都 需要 这 样 做 。 关 于 什 
么 时 候 该 用 article， 参 见 第 3 章 。 

接 下 来 是 标题 ， 参 见 图 1.2.4。HTML 提 
供 了 六 个 标题 级 别 一 一 h1 ~ he, Hob, hie 
最 重要 的 一 级 。h2 是 hi 的 次 一 级 标题 ，h3 是 





























每 个 HTML 页 面 都 应 该 有 一 个 hi (或 者 
多 个 hi， 这 取决 于 你 的 内 容 ) 。 因 此 ， 将 标 
题 标记 为 hi 是 比较 直观 的 做 法 。 关 于 h1 ~ 
h6 标题 元 素 ， 参 见 第 3 章 。 

接 下 来 ,我 们 捅 入 一 张 图 片 ， 参 见 
图 1.2.5, img 元 素 是 显示 图 片 的 首选 元 素 ， 
因此 也 无 需 讨论 用 哪个 元 素 合适 。 如 果 图 片 
没有 加 载 成 功 ， 或 者 页 面 是 通过 仅 显 示 文 本 
的 浏览 需 查 看 的 , 就 会 显示 alt 属性 中 的 文字 。 
关于 img 元 素 ， 参 见 第 5 章 。 





























«img src-"blueflax.jpg" width-"300" 
> height-"175" alt="Blue Flax (Linum lewisii)" 
d» 





1.2.5 用 ing 在 页 面 中 插入 图 片 很 容易 。 如 果 
图 片 未 能 显示 ， 就 会 显示 alt 属性 中 的 文字 “Blue 
Flax (Linum lewisii)" 


段落 由 p 元 素 标 记 ， 如 图 1.2.6 所 示 。 同 
印刷 材料 中 的 段落 一 样 ， 一 个 段落 可 以 包含 
一 个 或 多 个 句子 。 如 果 页 面 需要 再 加 一 个 段 
落 ， 只 需要 在 第 一 个 p 元素 之 后 再 加 一 个 p 
元 素 就 可 以 了 。 














<p>I am continually «em»amazed«/em» at 

> the beautiful, delicate «a hrefz"http:// 

» en.Wikipedia.org/wiki/Linum lewisii" 
'rel-"external" title-"Learn more about 
> Blue Flax"»Blue Flax«/a» that somehow 

— took hold in my garden. They are awash in 

— color every morning, yet not a single 

» flower remains by the afternoon. They are 

» the very definition of ephemeral.«/p» 











h2 的 次 一 级 标题 ， 依 次 类 推 ， 就 像 用 文字 处 
理 软 件 编辑 一 篇 具有 多 级 标题 的 文档 一 样 。 








«hi»The Ephemeral Blue Flax«/hi» 











1.24 ”标题 是 描述 页 面 概貌 的 重要 元 素 。 它 们 
使 页 面 对 屏 幕 阅读 器 用 户 来 说 更 具 可 访问 性 ， 而 搜 
索引 擎 用 它们 确定 页 面 的 重点 

































































1.26 p 元 素 可 以 包含 定义 段落 内 短语 语义 的 
其 他 元 素 ，em 和 a 是 两 个 例子 

在 我 们 的 段落 里 ， 有 两 个 元 素 是 用 来 定义 
少量 文字 的 含义 一 一 en 和 a。 这 是 HTMLS 提 
供 的 大 量 用 于 提升 段落 文本 语义 的 短语 内 容 元 
素 的 两 个 例子 。 它 们 与 p 会 在 第 4 章 中 讨论 。 
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em 元 素 表 示 “ 强 调 ”。 在 我 们 的 示例 
页 面 中 ， 它 强调 了 对 花 的 惊叹 之 情 。 记 住 ， 
HTML 描述 的 是 内 容 的 含义 ， 因 此 em 代表 的 
是 语义 上 的 强调 ， 而 非 视 觉 上 的 (尽管 通常 
会 把 em 文本 用 斜体 表示 ) 。 

最 后 ， 基 本 页 面 通过 a 元 素 定义 了 一 个 
链接 。 链 接 可 谓 是 所 有 HTML 元 素 中 最 强大 
的 元 素 ， 因 为 有 它 才 得 以 形成 万 维 网 。 万 维 
网 的 定义 就 是 ， 将 一 个 页 面 与 另 一 个 页 面 或 
资源 连接 起 来 ， 或 者 将 页 面 的 一 部 分 与 另 一 
部 分 连接 起 来 ( 既 可 以 是 同一 页 面 的 两 部 分 ， 
又 可 以 是 不 同 页 面 的 两 部 分 ) 。 在 这 个 例子 中 ， 
文字 “Blue Flax” 是 一 个 指向 维基 百科 某 页 
面 的 链接 ， 如 图 1.2.7 所 示 。 

















«a href-"http://en.wikipedia.org/wiki/Linum | 
— lewisii" rel-'"external" title-"Learn more 
— about Blue Flax'»Blue Flax«/a» 











1.2.7 a 元 素 定 义 了 一 个 指向 维基 百科 中 关于 
Blue Flax 的 链接 。rel 属性 指出 链接 指向 的 是 另 一 
个 网 站 ， 这 也 增加 了 语义 。 该 属性 是 可 选 的 ， 没 有 
它 链接 也 会 正常 工作 。 可 选 的 title 属性 提供 了 有 
关 所 指 页 面 的 信息 ， 它 也 增强 了 a 元 素 的 语义 。 当 
用 户 用 鼠标 滑 过 该 链接 ， 就 会 显示 title 属性 里 的 
内 容 

相当 简单 ， 对 吧 ” 当 你 对 HTML 元 素 了 
解 更 多 之 后 ， 为 内 容 选 择 正 确 的 元 素 通常 是 
相当 简单 的 工作 。 偶 尔 ， 你 会 遇 到 一 些 内 容 ， 
有 一 种 以 上 的 合理 标记 方式 ， 这 也 没 问题 。 
有 时 候 不 能 直接 辨别 对 与 错 ， 当 然 大 多 数 时 
候 可 以 。 

最 后 需要 指出 ，HTML5 并 未 试 着 为 每 一 
种 能 想到 的 内 容 类 型 提供 对 应 的 元 素 ， 因 为 
这 样 会 使 这 门 语言 变 得 笨重 。 相 反 ，HTML5 
采取 了 一 种 务实 的 态度 ， 其 所 定义 的 元 素 覆 
盖 了 绝 大 多 数 情况 。 

HTML 之 美 ， 部 分 在 于 人 们 能 很 容易 地 

































































掌握 其 基础 ， 从 而 构建 一 些 页 面 ， 并 在 此 基 
mi EAERI. Ke, SEARA 100 
种 HTML 元 素 ， 但 不 要 被 这 个 数字 吓 到 。 只 
有 少量 核心 元 素 是 你 会 经 常用 到 的 ， 而 其 余 
的 则 较 少 用 到 。 你 已 经 了 解 了 一 些 常见 元 素 ， 
因此 你 已 经 有 了 个 好 的 开始 。 


4. 为 什么 语义 很 重要 
知道 了 语义 化 HTML 的 重要 性 ， 也 看 到 
了 如 何 进 行 语义 化 以 后 ， 还 需要 知道 它 为 什 
么 如 此 重要 。 
下 面 是 一 些 重要 原因 ( 当然 还 不 全 ) ， 
其 中 的 一 些 前 面 已 经 提 到 过 了 。 
a 可 以 提升 可 访问 性 和 互 操作 性 ( 内 容 对 
于 面向 残障 访问 者 的 辅助 技术 是 可 用 
的 ， 同 时 对 于 合式 机 、 手 机 、 平 板 电 脑 
及 其 他 设备 上 的 浏览 器 都 是 可 用 的 ) 。 
a 改进 了 搜索 引擎 优化 (SEO ) 。 
口 (通常 ) 使 代码 更 少 ， 页 面 更 快 。 
口 使 维护 代码 和 添加 样式 变 得 容易 。 




















你 可 能 对 可 访问 性 并 不 熟悉 。 它 指 的 是 让 
内 容 对 所 有 用 户 可 用 ， 不 论 其 能 力 如 何 ( 参见 
www.w3.0rg/standards/webdesign/accessibility)。 JJ 
维 网 的 发 明 者 Tim Berners-Lee 曾 说 过 一 句 著 
名 的 话 : “万 维 网 的 力量 在 于 其 普 适 性 。 让 
包括 残障 人 士 在 内 的 每 个 人 都 能 访问 万 维 网 ， 
是 极为 重要 的 一 点 。” 

任何 带 有 浏览 器 的 设备 都 可 以 显示 
HTML ， 因 为 它 只 是 文本 。 然 而 ， 用 户 获 取 内 
容 的 方式 可 能 并 不 相同 。 例 如 ， 视 力 正常 的 
人 可 以 直接 查看 内 容 ， 而 视力 受 损 的 用 户 则 
需要 放大 页 面 ， 调 大 字号 ， 或 者 使 用 屏幕 阅 
iss ( 可 以 将 内 容 表 读 出 来 的 软件 ， 是 辅助 
技术 的 一 个 例子 ) 。 有 时 ， 屏 幕 阅读 需 会 将 
VAS EIL HTML 元 素 的 类 型 读 出 来 ， 让 用 
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户 了 解 上 下 文 。 例 如 ， 对 于 列表 ， 在 列表 各 
个 条 目 读 出 来 之 前 ， 用 户 会 首先 被 告知 这 里 
有 一 个 列表 。 类 似 地 ， 对 于 链接 ， 用 户 会 被 


1. 元 素 
元 素 就 像 描述 网 页 不 同 部 分 的 小 标签 一 
FÉ. “这 是 一 个 标题 ， 那 是 一 个 段落 ， 而 那 























告知 这 里 有 一 个 链接 ,方便 其 决定 是 否 点 击 
这 个 链接 。 
屏幕 阅读 器 用 户 能 够 以 多 种 方式 浏览 区 
页 ， 例 如 通过 键盘 按键 从 一 个 标题 跳 到 下 一 
个 标题 。 这 样 ， 他 们 可 以 先 了 解 一 个 页 面 的 
关键 主题 有 哪些 ,再 去 听 他 们 感 兴趣 的 内 容 ， 
而 不 是 必须 把 整个 页 面 从 头 到 尾 听 下 来 。 
你 看 ， 对 残障 人 士 来 说 ， 好 的 语义 产生 
了 多 么 大 的 差别 。 
同时 ，SEO 的 效果 也 会 改善 ， 也 就 是 说 
网 页 在 搜索 引擎 中 的 排名 会 靠 前 ， 因 为 搜索 
引擎 对 用 特殊 方式 标记 的 内 容 会 赋予 更 高 的 
权重 。 例 如 ， 标 题 告诉 搜索 引擎 怜 虫 页 面 的 
主要 主题 ， 帮 助 浏览 需 索 引 页 面目 录 。 
随 着 不 断 深入 阅读 本 书 ， 你 会 了 解 为 什 
么 好 的 语义 能 使 代码 更 有 效 、 更 易于 维护 和 
添加 样式 。 


1.3 标记 : 元 素 、 属 性 和 值 


见识 了 一 些 HTML 以 后 ， 我 们 来 仔细 看 
看 标记 的 组 成 。 
HTML 标记 主要 包括 三 种 成 分 : 元 素 
(element ) 、 属 性 (attribute ) 和 值 (value ) 。 
你 已 经 在 基本 页 面 中 见 到 了 它们 各 自 的 实例 。 
































组 链接 是 一 个 导航 。” 我 们 在 前 面 已 经 讨 
论 过 一 些 元 素 。 有 的 元 素 有 一 个 或 多 个 属性 ， 
属性 进一步 描述 了 元 素 的 用 途 和 内 容 ( 如 果 
有 的 话 ) 。 

元 素 可 以 包含 文本 , 可 以 包含 其 他 元 素 ， 
也 可 以 是 空 的 ,一 个 非 空 元 素 由 开始 标记 ( start 
tag， 元 素 的 名 称 和 属性 ， 如 果 有 的 话 放 在 尖 
括号 中 ) 、 内 容 和 结束 标记 (end tag， 一 个 
斜 杠 后 跟 元 素 的 名 称 放 在 尖 括 号 中 ) 组 成 ， 
如 图 1.3.1 所 示 。 




















Dd 


开始 标记 结束 标记 
| | 





am continually Semssnazeds /em 
类 括号 LS 











13.4 一 个 典型 的 HTML 元素。 开始 标记 和 结 
束 标 记 包 着 元 素 所 描述 的 文字 。 在 这 个 例子 中 , 通 
过 使 用 em 元 素 ，amazed 一 词 被 强调 了 。 习 惯 上 ， 
使 用 小 写字 母 输入 标记 

"* JG (empty element) 看 起 来 像 开 始 
标记 和 结束 标记 的 结合 ， 由 左 尖 括 号 开头 ， 
然后 是 元 素 的 名 称 和 任何 可 能 有 的 属性 ， 然 
后 是 一 个 可 选 的 空格 和 一 个 可 选 的 斜 枉 ， 最 
后 是 必须 有 的 右 尖 括号 ， 如 图 1.3.2 所 示 。 















































<img src="blueflax.jpg" width-"300" height-"175" alt="Blue Flax (Linum lewisii)" /> 





T 
空格 和 斜 杠 

















1.9. SEA 














不 包围 任何 文本 内 容 C alt 属性 中 的 文字 是 元 素 的 一 部 分 ， 并 未 被 元 素 包 于 ) ， 就 像 





这 里 显示 的 img 元 素 。 空 元 素 只 有 一 个 标记 ， 既 作为 元 素 开始 ， 又 作为 元 素 结束 。 结 尾 处 的 空格 和 和 斜 杠 在 

















HTMLS 中 是 可 选 的 ， 但 通常 还 是 会 写 上 它们 。 不 过 ， 元 素 最 后 面 的 > 是 必须 有 的 
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在 HTML5 中 ， 空 元 素 结尾 处 的 空格 和 和 斜 
杠 是 可 选 的 。XHTML 要 求 空 元 素 结尾 处 有 和 斜 
杠 。 应 该 说 ， 我 们 这 些 以 前 用 XHTML 的 人 
恐怕 仍然 倾向 于 在 HTMLS 中 继续 这 样 做 ， 而 
其 他 人 则 当然 不 用 斜 枉 了 。 本 书 会 在 代码 中 
包含 斜 杜 ， 但 如 果 选 择 忽 略 它们 ， 页 面 也 不 
会 表现 出 任何 不 同 。 不 管 选 择 哪 种 方式 ， 建 
议 始终 保持 一 致 。 

依照 习惯 ， 元 素 的 名 称 都 用 小 写字 母 ， 
但 HTMLS 对 此 也 未 做 要 求 ， 用 大 写字 母 也 
是 允许 的 。 然 而 ， 现 在 很 少 有 人 用 大 写字 
母 编写 代码 ， 因 此 ， 除 非 无 法 抗拒 ， 否 则 不 
推荐 这 样 做 。 使 用 大 写字 母 是 一 种 过 时 的 
做 法 。 















































2. 属性 和 值 

属性 包含 的 是 有 关 文 档 内 容 的 信息 并 非 
文档 内 容 本 身 ， 如 图 1.3.3 和 图 1.3.4 所 示 。 
在 HTMLS 中 ,属性 值 两 边 的 引号 是 可 选 的 ， 
但 习惯 上 还 是 会 写 上 它们 ， 因 此 建议 始终 这 
样 做 。 同 元 素 的 名 称 一 样 ， 建 议 你 用 小 写字 
母 编 写 属性 的 名 称 。 

本 书 会 对 大 多 数 属性 可 接受 的 值 进行 详 
细 说 明 , 不 过 不 妨 先 看 看 都 有 哪些 类 型 的 值 。 

有 的 属性 可 以 接受 任何 值 ， 有 的 则 有 限 
制 。 最 常见 的 还 是 那些 仅 接受 枚 举 的 或 预定 
义 的 值 的 属性 。 也 就 是 说 ， 必 须 从 一 个 标准 
列表 中 选 一 个 值 ， 如 图 1.3.5 所 示 。 一 定 要 用 
小 写字 母 编 写 枚 举 的 值 。 









































for € label 的 一 个 属性 
paan 
<label forz"email"»Email Address</label> 


=i 
for 属性 的 值 



































1.8.8 这 是 一 个 label 元 素 〈 该 元 素 用 于 将 一 个 文字 标签 与 一 个 表单 域 关 联 在 一 起 ) ， 它 有 一 对 简单 的 























明 性 和 值 。 属 性 总 是 位 于 元 素 的 开始 标记 里 面 ， 通 常用 











对 引号 包围 属性 的 值 














href 是 a 的 一 个 属性 
href 的 什 


rel 也 是 a 的 一 个 属性 
| rel 的 值 








| 
title 的 值 
title 是 a 的 一 个 属性 





<a href="http://en.wikipedia.org/wiki/Linum lewisii" rel-"external" 
»title-"Learn more about Blue Flax^»Blue Flax</a> 














图 1.3.4 有 的 元 素 可 以 有 一 个 或 多 个 属性 ， 每 个 
序 并 不 重要 。 不 同 的 属性 值 对 之 间 都 用 空格 隔 开 





























盟 性 都 有 各 自 的 值 ， 就 像 上 面 的 a 元 素 一 样 。 属 性 的 顺 








预定 义 的 值 





<link rel="stylesheet" media="screen" href-"blueflax.css" /» 

















1.8.5 有 的 属性 只 接受 特定 的 值 。 例 如 ，1link 元 素 里 的 media 属性 只 能 被 设 为 all、screen、print 等 ， 








你 不 能 像 对 title 属性 那样 任意 输入 一 个 值 








也 
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很 多 属性 的 值 需要 填 人 一 个 数字 ， 特 别 。 元 素 的 后 代 ， 如 图 1.3.6 所 示 。 实 际 上 ， 可 以 
是 那些 描述 大 小 和 长 度 的 值 。 数 字 值 无 需 包 ”创建 网 页 的 家 谱 ， 显 示 页 面 上 各 元 素 之 间 的 
含 单位 ， 只 需 输 入 数字 本 身 。 图 片 和 视频 的 。 层次 关系 并 唯一 地 标识 每 个 元 素 。 















































宽度 和 高 度 是 有 单位 的 ， 不 过 会 默认 它们 的 这 种 家 谱 式 的 基本 结构 是 HTML 代码 的 
单位 为 像素 。 一 个 关键 特性 ， 它 有 助 于 在 元 素 上 添加 样式 

有 的 属性 引用 其 他 文件 ， 如 href 和 (从 第 7 章 开 始 讨论 ) 和 应 用 JavaScript 行 为 。 
src。 它 们 只 能 包含 URL ( 统一 资源 定位 符 ， 值得 注意 的 是 ， 当 元 素 中 包含 其 他 元 素 
是 万 维 网 上 文件 的 唯一 地 址 ) 形式 的 值 。 关 ”时 ， 每 个 元 素 都 必须 正确 地 般 套 ， 也 就 是 子 
FURL, 参见 1.7 节 。 元 素 必 须 完全 地 包含 在 父 元 素 中 。 使 用 结 


标记 的 时 候 , 它 必 须 与 最 近 的 开始 标记 对 应 。 
换 句 话说 ， 先 开始 元 素 1， 再 开始 元 素 2， 就 
要 先 结束 元 素 2， 青 结束 元 素 1， 如 图 1.3.7 
所 示 。 


3. 父 元 素 与 子 元 素 

如 果 一 个 元 素 包含 男 一 个 元 素 ， 它 就 是 
被 包含 元 素 的 父 元 素 ， 被 包含 元 素 称 为 子 元 
素 。 子 元 素 中 包含 的 任何 元 素 都 是 外 层 的 父 
































«article» 

«hi»The Ephemeral Blue Flax«/hi» 

«img src-'blueflax.jpg"... /> 

«p»... continually «em»amazed«/em» ... delicate «a ...»Blue Flax«/a» ...«/p» 
«/article» 











1.3.6 article 元 素 是 hi, img 和 p 元 素 的 父 元 素 。 反 过 来 ，h1、img 和 p 元 素 是 article 元 素 的 子 元 素 
(和 后 代 ) o p 元 素 是 em 和 a 元 素 的 父 元 素 。em 和 a 元 素 是 p 元 素 的 子 元 素 ， 也 是 article 元 素 的 后 代 (但 
不 是 子 元 素 ) 。 反 过 来 ，article 元 素 是 它们 的 祖先 








正确 (AUR E RA) 





~ | 
<p>... continually <em>amazed</em> ...</p> 





«p»... continually <em>amazed ...«/p»«/em» 











错误 ( 标记 对 相互 交叉 ) 






































1.8.7 元素 必须 正确 地 髋 套 。 如 果 先 开始 p， 再 开始 em， 就 必须 先 结束 em, FHER p 











1.4 网 页 的 文本 内 容 的 成 分 。 如 果 你 用 过 文字 处 理 软件 ,那么 你 
一 定 输入 过 文本 。 不 过 ，HTML 页 面 中 的 文 
元 素 中 包含 的 文本 可 能 是 网 页 上 最 基本 本 有 一些 重要 的 差异 。 
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首先 ， 浏览 器 呈现 HTML 时 ， 会 把 多 个 
空格 或 制 表 符 压 缩 成 单个 空格 ， 并 把 回 车 和 
换行 符 转 换 成 单个 空格 ,或 者 将 它们 一 起 忽 
略 ， 如 图 1.4.1 和 图 1.4.2 所 示 。 





«p3I am continually «em»amazed«/em» at the 
> beautiful, delicate Blue Flax that 
—> somehow took hold in my garden. 


They are awash in color every 
— morning, yet not a single flower 
> remains by the afternoon. 


They are the very definition of 
— ephemeral.«/p» 
<p>&copy; Blue Flax Society.«/p» 














1.4.1. 页 面 的 文本 内 容 〈 粗 体 部 分 ) 几乎 就 是 
标记 以 外 的 所 有 东西 。 在 这 个 例子 里 面 ， 注 意 每 
个 句子 都 至 少 包 含 一 个 回 车 ， 有 的 词 之 间隔 了 好 
儿 个 空格 (为 了 说 明 对 回 车 和 空格 的 压缩 ) o A 
外 ， 这 里 还 包含 一 个 表示 版 权 符 号 的 特殊 字符 引 
(&copy; ) ， 这 样 做 可 以 确保 无 论 以 哪 种 编码 方式 
保存 这 份 文档 ， 这 个 符号 都 会 被 正确 地 显示 


















































pn 






























Blue Flax (Linum lewisi) - Mozilla Firefox 


File Edt View History Bookmarks Tools Help 
|+ a 


Iam continually amazed at the beautiful, delicate Blue Flax that somehow took 
hold in my garden. They are awash in color every morning, yet not a single flower 
remains by the afternoon. They are the very definition of ephemeral. 





| Blue Flax (Linum lewisii) 





© Blue Flax Society. 


























1.4.2 注意 ， 在 使 用 浏览 器 查看 这 份 文 档 时 ， 
多 余 的 回 车 和 空格 都 被 忽略 了 ， 字 符 引 用 被 蔡 换 成 
了 对 应 的 符号 (©) 





其 次 , HTML 过 去 只 能 使 用 ASCII 字符 。 
ASCI 只 包括 英语 字母 、 数 字 和 少数 几 个 常用 
的 符号 。 重 音字 符 ( 在 很 多 西欧 语言 中 很 常见 ) 
和 许多 日 党 符号 必须 用 特殊 的 字符 引用 来 创 
建 ， 如 Seacute; ( 表示 《) , &copy; ( 表示 
©) 等 。 完 整 列 表 见 www.elizabethcastro.com/ 








html/extras/entities.html。 

Unicode 大 大 减轻 了 特殊 字符 问题 的 负 
担 。 用 UTF-8 对 页 面 进行 编码 ( 如 基本 页 面 
那样 ， 参 见 图 1.4.3 ) ， 并 用 同样 的 编码 保存 
HTML 文件 (参见 2.3 节 ) 已 成 为 一 种 标准 做 
法 。 推 荐 你 也 这 样 做 。 








<!DOCTYPE html» 
«html lang-"en"» 
«head» 
«meta charset-"utf-8" /> 
«title»Blue Flax (Linum lewisii)«/title» 
«/head» 
«body» 


«/body» 
«/html» 

















1.44.8 ”直接 在 head 开始 标记 后 面 指明 文档 的 字 
符 编码 。charset 属性 用 以 设置 编码 类 型 

由 于 Unicode 是 ASCI 的 超 集 ( 它 包含 
ASCI 中 的 所 有 字符 ， 还 包含 许多 其 他 的 字 
TT) ， 因 此 用 Unicode 编码 的 文档 与 现 有 的 浏 
览 占 和 编辑 器 都 兼容 ( 特别 旧 的 除外 ) 。 不 
理解 Unicode 的 浏览 器 会 正确 地 解释 文档 的 
ASCI 部 分 ， 而 理解 Unicode 的 浏览 器 还 会 显 
示 非 ASCII 部 分 。 即 便 如 此 ， 有 时 还 是 会 使 
用 字符 引用 ， 如 版 权 符 号 ( 因为 &copy; 既 好 
记 又 好 输入 ) ， 如 图 1.4.1 所 示 。 


1.5 ” 链接、 图像 和 其 他 非 文 本 
内 容 


WAR, 万维网 充满 生机 的 部 分 原因 是 页 
面 之 间 的 链接 ， 以 及 图 像 、 视 频 、 音 乐 、 动 
画 等 。 外 部 文件 (如 视频 ) 实际 上 并 没有 放 
Æ HTML 文件 中 ， 而 是 单独 保存 的 ， 只 是 
简单 地 在 页 面 中 引用 了 这 些 文件 ， 如 图 1.5.1 
所 示 。 由 于 引用 只 是 文本 ， 因 此 不 会 破坏 
HTML 文件 的 普 所 可 访问 性 。 
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«article» 
«hi»The Ephemeral Blue Flax«/hi» 


«img src-"blueflax.jpg" width-"300" 
— height="175" alt="Blue Flax (Linum 
—> lewisii)" /> 


<p>I am continually <em>amazed</em> at 

> the beautiful, delicate <a href= 

> "http://en.wikipedia.org/wiki/ 

Linum_ 

— lewisii" rel-'external" title-"Learn 

— more about the Blue Flax"»Blue Flax 

></a> that somehow took hold in my 

— garden. They are awash in color every 

— morning, yet not a single flower 

— remains by the afternoon. They are the 

— very definition of ephemeral.«/p» 
«/article» 














15.4 在 我 们 的 基本 HTML 文档 中 ， 有 一 个 对 
图 像 文件 blueflax.jpg 的 引用 ， 浏 览 器 在 加 载 页 面 其 
他 部 分 的 同时 ， 会 请 求 、 加 载 和 显示 这 个 图 片 。 该 
页 还 包括 一 个 指向 关于 Blue Flax 的 页 面 的 链接 
浏览 器 可 以 毫 无 困难 地 处 理 链接 和 图 像 ( 仅 
文 持 文 本 的 浏览 带 除 外 ), 如 图 1.5.2 所 示 。 然 而 ， 
它们 无 法 处 理 其 他 任何 文件 类 型 。 如 果 引 用 了 
访问 者 的 浏览 器 不 能 理解 的 文件 ， 浏 览 絮 通常 
会 试 着 寻找 能 打开 这 种 文件 的 插件 或 辅助 应 用 
程序 (位 于 访问 者 计算 机 上 的 某 个 程序 ) o 


























Blue Flax (Linum lewisii) - Mozilla Firefox 
Ele Edt view History Bookmarks Tools Help 
| L] Blue Fax (Linum lewisi +] 








The Ephemeral Blue Flax 





Iam continually amazed at the beautiful, delicate Blue Flax that somehow took 
hold in my garden. They are awash in color every morning, yet not a single 
flower remains by the afternoon. They are the very definition of ephemeral. 








图 1.5.2. 从 网 页 引用 图 像 和 其 他 非 文本 内 容 ， 浏 
览 需 会 将 这 些 内 容 与 文本 一 起 显示 














还 可 以 向 浏览 器 提供 额外 的 信息 ， 告 诉 
它 呈 现 内 容 需 要 用 到 的 插件 ， 以 及 如 果 访 问 
者 的 计算 机 上 没有 查看 特定 文件 的 插件 ， 应 
该 如 何 下 载 这 些 插件 。 

下 载 和 安装 插件 会 打 断 用 户 访 问 网 站 的 
体验 ， 让 人 感觉 完成 这 些 事情 需要 花 很 长 时 
间 。 由 于 插件 并 不 是 浏览 响 自 带 的 部 分 ， 它 
们 还 会 引入 性 能 问题 。 

例如 ，Flash 是 多 年 来 使 用 最 为 广泛 的 插 
件 。 你 肯定 经 历 过 观看 Flash 视频 的 过 程 中 计 
算 机 变 慢 甚 至 浏览 器 朋 江 的 情况 。 

HTMLS 试图 减轻 这 些 问 题 ， 其 做 法 是 通 
过 audio 和 video 元 素 在 浏览 器 中 引入 原生 的 
媒体 播放 器 。 不 地 的 是 ， 不 同 的 浏览 器 厂商 
对 支持 的 媒体 格式 存在 争议 ， 因 此 还 无 法 完 
全 抛弃 插件 。 不 过 ， 这 毕 况 是 个 开始 。 

本 书 将 在 第 5 章 讨论 图 像 ， 在 第 17 章 讨 
论 插 件 、HTMLS 的 媒体 元 素 等 内 容 。 


16 文件 名 


同 其 他 文本 文档 一 样 ， 网 页 也 有 一 个 
文件 名 ， 用 以 向 创建 者 、 访 问 者 及 访问 者 的 
Web 浏览 器 标识 该 文件 。 对 网 页 文件 命名 时 
要 记 住 几 点 ， 这 些 要 点 有 助 于 对 文件 进行 组 
织 ， 使 访问 者 更 容易 找到 并 访问 你 的 页 面 ， 
确保 他 们 的 浏览 器 能 正确 地 处 理 页 面 ， 以 及 
增强 SEO iB 1.6.1 和 图 1.6.2。 





























1. 使 用 小 写字 母 的 文件 名 

为 网 页 选择 的 文件 名 决定 了 访问 者 在 访 
问 你 的 页 面 时 需要 输入 什么 ， 因 此 如 果 文 件 
名 只 用 小 写字 母 的 话 ， 访 问 者 就 能 避免 无 意 
的 输入 错误 C 同时 避免 为 此 而 头疼 ) 。 这 样 
做 对 创建 页 面 之 间 的 链接 也 有 很 大 的 帮助 。 
如 果 所 有 的 文件 名 都 用 小 写字 母 ， 你 就 少 了 
一 件 需要 操心 的 事情 。 
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2. 用 短 横 线 分 隔 单词 

不 要 在 文件 名 中 使 用 空格 分 隔 单 词 。 应 
该 使 用 短 横 线 ， 例 如 company-history.html 和 
my-favorite-movies.html。 有 的 网 站 使 用 下 划 
线 ( ””) ， 但 这 不 是 推荐 的 做 法 ， 因 为 短 
横 线 是 搜索 引擎 更 倾向 于 接受 的 方式 。 

3. 使 用 正确 的 扩展 名 

浏览 需 主 要 通过 查看 文件 的 扩展 名 得 
需要 读 取 的 文本 文档 是 一 个 网 页 。 尽 管 可 以 























使 用 .htm 作为 网 页 的 扩展 名 ， 但 通常 使 用 的 
是 .html， 因 此 推荐 使 用 .html。 如 果 页 面 使 用 
其 他 的 扩展 名 (如 exc) ,浏览 器 会 将 其 当做 
文本 处 理 ， 于 是 会 把 你 的 代码 直接 呈现 给 访 
问 者 。 











Mac OS 和 Windows 并 不 总 是 显示 文 
档 的 实际 扩展 名 。 如 需 查 看 扩展 名 ， 请 更 改 
文件 夹 选项 。 





文件 名 ,全 部 
mam 
Wes i 


用 短 横 线 分 隔 每 个 单词 


扩展 名 
| 








首 字 母 大 写 的 文件 名 
不 方便 输入 和 交流 


p 
Buckminster Fuller.html 


| 
下 划 线 对 搜索 引擎 优化 的 
支持 程度 不 如 短 横 线 




















1.6.1 
母 会 增加 访问 者 输入 正确 地 址 以 及 找到 页 面 的 难度 




















记 住 ， 文 件 名 全 部 使 用 小 写字 母 ， 用 短 模 线 分 隔 单词 ， 用 .html 作为 扩展 名 。 混 合 使 用 大 小 写字 











mM 


| 
错误 的 方法 





http://www.yoursite.com/notable-architects/20th-century/buckminster-fuller.html 
http://www.yoursite.com/NotableArchitects/20th CENTURY/Buckminster Fuller.html 











1.6.2 
创建 者 就 不 必 浪 费时 间 思 考 : 




















目录 和 文件 夹 的 名 称 也 应 全 部 用 小 写字 母 ， 关 键 是 保持 一 致 。 如 果 不 使 用 大 写字 母 ， 访 问 者 和 
“这 个 字母 是 大 写 的 B 还 是 小 写 的 ? " 








1.7 URL 


URL ( Uniform Resource Locator， 统 一 资 
源 定位 符 ) 是 地 址 的 别名 。 它 包含 关于 文件 
存储 位 置 和 浏览 器 应 如 何 处 理 它 的 信息 。 互 
联网 上 的 每 个 文件 都 有 唯一 的 URL。 

URL 的 第 一 个 部 分 称 为 模式 (scheme ) 。 
模式 告诉 浏览 器 如 何 处 理 需 要 打开 的 文件 。 
最 常见 的 模式 是 HTTP (Hypertext Transfer 











模式 。 服务 器 名 称 路 径 文件 名 
m L—— 
"http: //www.site.com/tofu/index.html" 











12.1. 基本 的 URL 包含 模式 、 服 务 器 名 称 、 路 
径 和 文件 名 

URL 的 第 二 个 部 分 是 文件 所 在 服务 器 的 
名 称 ， 紧 接着 是 到 达 这 个 文件 的 路 径 ， 以 及 
文件 自身 的 名 称 。 有 时 URL 不 以 文件 名 结尾 ， 























Protocol， 超 文本 传输 协议 ) ， 用 于 访问 网 页 ， 
如 图 1.7.1 所 示 。 


而 以 一 个 路 径 结尾 ( 可 以 包含 一 个 结尾 的 斜 
杠 ， 也 可 以 不 包含 ) ， 如 图 1.7.2 所 示 。 在 这 





Ax =. 
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种 情况 下 ，URL 指 的 是 路 径 中 最 后 一 个 目录 
中 的 默认 文件 (通常 为 index.html ) 。 








R 
"http://www.site.com/tofu/" 








模式 后 面 通常 紧 跟 一 个 冒号 和 两 个 斜 杜 。 
mailto 和 news 是 例外 , 它们 后 面 只 有 一 个 冒号 。 

注意 file 模式 后 面 跟着 一 个 冒号 和 三 个 斜 
杜 。 这 是 因为 第 二 个 和 第 三 个 斜 杠 之 间 代 表 
的 主机 假定 为 本 地 计算 机 。 应 始终 用 小 写字 














1.7.2 ”以 一 个 斜 杠 而 非 文件 名 结尾 的 URL 指向 最 
后 一 个 目录 (在 这 个 例子 中 是 tofu 目录 ) 中 的 默认 
文件 。 最 常见 的 默认 文件 名 是 indexhtml。 因 此 ， 这 
个 URL 与 上 一 个 例子 中 的 URL 指向 的 是 同一 个 页 面 

其 他 常见 的 模式 有 https( 用 于 安全 网 页 )、 
ftp ( File Transfer Protocol， 文 件 传 输 协 议 ， 
用 于 下 载 文件 ， 参 见 图 1.7.3) 、mailto ( 用 于 
发 电子 邮件 ， 参 见 图 1.7.4 ) 、file ( 用 于 访问 
本 地 人 硬盘 或 本 地 文件 共享 网 络 上 的 文件 ， 这 
种 模式 很 少 有 机 会 用 到 ， 人 参见 图 1.7.5 ) 。 











模式 服务 器 名 路 径 人 





"ftp://ftp.site.com/pub/proposal.pdf" 





























127.3 当 用 户 点 击 这 个 URL 时 ， 浏 览 器 会 开始 
按 FTP 模式 传输 文件 proposal.pdf 














电子 邮件 地 址 
| 





iai 








"mailto:somenamegsomedomain.com" 














17.4 用 于 电子 邮件 地 址 的 URL 包括 mailto 模 
式 ， 紧 接着 是 一 个 冒号 ( 没有 和 斜 丁 ) ， 然 后 是 电子 
邮件 地 址 本 身 

































































模式 m RS 文件 名 
"file:///c | /pathyhome.htm 





1.7.5 使 用 file 模式 引用 本 地 Windows 机 器 上 
的 文件 。 对 于 Macintosh, Jy fi JH file://Harddisk/ 
path/filename， 无 需 紧 线 。 有 时 在 Windows 上 也 
不 需要 坚 线 

















母 输入 模式 。 
在 上 述 模 式 中 ， 最 常用 到 的 是 http 和 
mailto, 其 他 模式 则 只 有 在 特殊 情况 下 才 会 用 到 。 


1. 绝对 URL 

URL 可 以 是 绝对 的 ， 也 可 以 是 相对 的 。 
绝对 URL (absolute URL ) 显示 文件 的 完整 路 
径 ， 包 括 模式 、 服 务 器 名 称 、 完 整 路 径 和 文 
件 名 本 身 ， 如 图 1.7.6 所 示 。 绝 对 URL 就 像 
是 完整 的 通信 地 址 ， 包 括 国 家 、 州 、 城 市 、 
邮政 编码 、 街 道 和 姓名 。 无 论 邮 件 来 自 哪里 ， 
邮局 都 能 找到 收 件 人 。 对 于 URL， 这 意味 着 
绝对 URL 本身 与 被 引用 文件 的 实际 位 置 无 关 ， 
无 论 是 在 哪个 服务 器 上 的 网 页 中 ， 某 一 文件 
的 绝对 URL 都 是 完全 一 样 的 。 


























|. about 
F no 


E press 


L news.html 


E sign-up 


L [23] index.html 


L 43 data.htmi 


| 网 index.html 
内 you-are-here.html 
F mo 


LIE) mage png 





1.7.6 包含 URL 的 文档 〈 在 这 个 例子 中 是 you- 
are-here.html ) 是 相对 URL 的 参照 点 。 换 名 话说 ， 
相对 URL 是 相对 于 这 个 文件 在 服务 器 上 的 位 置 。 
绝对 URL 与 其 所 在 的 位 置 无 关 ， 因 为 它们 总 是 包 
含 资源 的 完整 URL 














1.7 URL 15 








引用 别人 的 服务 器 上 的 文件 时 ， 总 是 应 该 使 
用 绝对 URL。 对 于 FTP 站 点 以 及 几乎 所 有 不 使 用 
HTTP 协议 的 URL， 都 应 该 使 用 绝对 URL, 





表 1.7.1 描述 了 访问 you-are-here.html 中 


各 个 文件 的 方式 ， 作 为 对 相对 URL 和 绝对 
URL 的 比较 。 表 中 包括 这 些 文件 与 you-are- 
here.html 在 同一 站 点 (site.com ) 和 在 男 一 站 
点 (remote.com ) 的 情况 。 











表 1.7.1 绝对 URL 与 相对 URL 

文件 名 绝对 URL《〈 可 以 在 任何 地 方 使 用 ) 相对 URL (只 能 在 you-are-here.html 中 使 用 ) 
index.html http://www.site.com/about/index.html index.html 
data.html http://www.site.com/about/info/data.html Ainfo/data.html 
image.png http://www.site.com/img/image.png ./img/image.png 
news.html http://www.remote.com/press/news.html 无 ， 请 使 用 绝对 URL 
index.html http://www.remote.com/sign-up/index.html 无 ， 请 使 用 绝对 URL 

2. 相对 URL 在 当前 文件 中 ， 有 一 个 


当 我 告诉 你 我 邻居 家 的 位 置 时 ， 我 一 般 不 
会 说 完整 地 址 ， 而 是 说 : “她 家 在 右边 第 三 个 
门 。” 这 就 是 相对 地 址 ， 它 指出 的 位 置 是 以 信 
息 提 供 者 的 位 置 为 参照 的 。 如 果 在 别 的 城市 按 
照 同样 的 信息 找 我 的 邻居 ， 你 永远 也 找 不 到 。 

同样 ， 相 对 URL 以 包含 URL 本 身 的 文 
件 的 位 置 为 参照 点 ， 描 述 目标 文件 的 位 置 。 
因此 ， 相 对 URL 可 以 表达 像 “ 指 向 本 页 面 同 
一 日 录 下 的 xyz 页 面 ” 这 样 的 意思 。 

如 果 目 标 文件 与 当前 页 面 (也 就 是 包含 
URL 的 页 面 ) 在 同一 个 目录 中 ， 那 么 这 个 文 
件 的 相对 URL 就 只 有 文件 名 和 扩展 名 ， 如 图 
1.7.7 所 示 。 如 果 目 标 文件 在 当前 目录 的 子 目 
录 中 ,那么 这 个 文件 的 相对 URL 就 是 子 目录 
名 , 接着 是 一 个 斜 杠 , 然后 是 文件 名 和 扩展 名 ， 
如 图 1.7.8 所 示 。 
















































































index.html 的 文件 …… 


"index.html" 





1.7.7 相对 URL 指向 同一 目录 下 的 文件 (参见 
图 1.7.6) 。URL 中 只 需要 文件 名 和 扩展 名 ， 不 必 
在 前 面 加 上 http:/www.site.com/about/ ( 这 两 个 文 
件 所 在 的 目录 ) 














名 为 info 的 文件 夹 …… 








| 
"info/data.html" 
T T 
ierra 包含 …… 一 个 名 为 data.html 的 文件 …… 








1.7.8 要 引用 当前 文件 夹 的 子 文件 夹 中 的 文件 
(在 这 个 例子 中 是 data.html ) (参见 图 1.7.6) ， 
应 在 文件 名 之 前 加 上 子 文件 夹 名称 和 一 个 斜 杠 


如 果 要 引用 文件 层次 结构 中 更 高 层 目 录 
中 的 文件 ， 那 么 应 该 使 用 两 个 句点 和 一 个 斜 
Fr, Anf 1.7.9 所 示 。 可 以 组 合 和 重复 使 用 两 
个 句点 和 一 个 斜 杜 ， 引 用 当前 文件 所 在 服务 
器 或 硬盘 上 的 任何 文件 。 











包含 当前 文件 夹 的 文件 夹 …… 
一 个 名 为 img 的 文件 夹 …… 


ing image. pug, 


eds 包含 …… 一 个 名 为 image.png 的 文件 …… 











1.7.9 在 图 1.7.6 中 可 以 看 到 ， 这 个 文件 位 于 与 
网 站 根 目 录 下 的 当前 文件 夹 (about ) 同属 一 层 的 
文件 夹 (img) 中 。 在 这 种 情况 下 ,使 用 两 个 句点 
和 一 个 斜 杜 上 升 一 级 ， 然 后 指出 子 目录 ， 再 跟 一 
个 斜 杜 ， 最 后 是 文件 名 。( 实践 中 ， 可 以 为 image. 
png 选择 一 个 更 具 描 述 性 的 文件 名 ， 这 里 的 名 称 仅 
作为 示例 。 ) 
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不 过 ， 如 果 文 件 位 于 Web 服务 器 上 ， 应 
该 避免 使 用 像 . /img/familyvacation.jpg iX FE 
显得 较为 笨拙 的 文件 路 径 ， 应 先 直 接 跳 到 网 
站 的 根 目 录 再 顺 着 向 下 找到 目标 文件 。 可 以 
在 最 开始 使 用 一 个 斜 枉 ， 这 样本 例 中 的 根 相 
对 URL 就 是 /img/family/vacationjpg( 假定 
img 文件 夹 位 于 网 站 的 根 文件 来， 这 也 是 惯 
第 的 用 法 ) 。 需 要 强调 的 是 ， 这 种 做 法 只 能 
用 于 Web 服务 右上 ， 例 如 在 网 站 托管 服务 供 
应 商 的 Web 服务 器 上 ， 或 者 在 本 地 计算 机 运 
行 的 Web 服务 器 上 (Apache 是 最 流行 的 Web 
服务 器 ) 。 

如 果 不 是 在 服务 器 本 地 开发 网 站 ， 通 党 
应 使 用 相对 URL ( 当然 ， 除 非 是 指向 其 他 服 
务 器 上 文件 的 情况 ) 。 这 样 做 会 使 将 页 面 从 
本 地 系统 传 到 服务 器 变 得 容易 。 只 要 每 个 文 
件 的 相对 位 置 保持 不 变 ， 就 不 必修 改 任 何 路 
径 ， 链 接 依 然 有 效 。 


1.8 要 点 回顾 


HTML 基础 以 及 某 些 关键 最 佳 实践 为 构 
建 有 效 网 站 打下 了 基础 。 下 面 我 们 来 回顾 一 
下 本 章 讲述 的 要 点 。 

a 一 个 网 页 主要 由 三 种 成 分 构成 : 文本 

内 容 、 对 其 他 文件 的 引用 和 标记 。 







































































O HTML 标记 巾 元素、 属性 和 值 构成 。 
口 通常 全 部 使 用 小 写字 母 编写 HTML 
(DOCTYPE 是 一 个 例外 ) ， 用 引号 
包 住 属性 值 , 用 一 个 空格 和 和 斜 杠 ( / ) 

口 始终 用 下 面 的 DOCTYPE 声明 开始 
HTML 文档 。 
<!DOCTYPE html» 

Q 页 面 内 容 都 在 body 元 素 中 。 主 要 为 浏 
览 器 和 搜索 引擎 准备 的 指令 位 于 body 
元 素 之 前 ， 在 head 元 素 中 。 

O 用 语义 化 HTML 标记 内 容 ， 不 关心 它 

在 浏览 器 中 显示 的 样式 。 

a 语义 化 HTML 提升 网 站 的 可 访问 性 ， 
让 网 站 更 有 效率 ， 并 让 网 站 维护 和 添 
加 样式 变 得 更 容易 。 

D CSS 控制 HTML 内 容 的 表现 。 

口 每 个 浏览 器 自 带 的 样式 表 规 定 HTML 
的 默认 表现 样式 。 可 以 使 用 自己 写 的 
CSS 禾 盖 这 些 规 则 。 

Q 全 部 使 用 小 写字 母 创建 文件 和 文件 夹 

的 名 称 ， 用 短 横 线 而 非 空格 或 下 划 线 

对 单词 进行 分 隔 。 


接 下 来 你 会 了 解 如 何 处 理 网 页 文件 。 



























































处 理 网 页 文件 








本 章 内 容 

口 规划 网 站 

口 创建 新 的 网 页 

口 保存 网 页 

口 指定 默认 页 面 或 主页 
口 编辑 网 页 

口 对 文件 进行 组 织 

口 在 浏览 絮 中 查看 网 页 
口 借鉴 他 人 灵感 








开始 编写 HTML 元 素 和 属性 代码 之 前 ， 
有 必要 了 解 如 何 创建 使 用 这 些 代 码 的 文件 。 
在 本 章 中 ， 你 将 了 解 到 如 何 创建 、 编 辑 和 保 
存 网 页 文件 ， 我 们 还 会 涉及 一 些 设计 和 组 织 
方面 的 注意 事项 。 

如 果 你 已 知道 如 何 创建 文件 ， 没 有 耐心 
读 完 本 章 ， 可 以 直接 跳 到 讲解 HTML 代码 本 
身 的 第 3 章 。 


2.1 规划 网 站 


尽管 可 以 直接 开始 编辑 网 页 ， 但 最 好 还 
是 先 对 网 站 进行 思考 和 规划 ,如 图 2.1.1 所 示 。 
这 样 ， 你 就 不 会 迷失 方向 ， 而 且 将 来 的 重组 
工作 也 会 减少 。 









































图 2.1.1 夯 出 网 站 结构 草图 ， 考 虑 它 可 能 包含 的 
内 容 ， 这 有 助 于 创建 者 决定 它 需要 何 种 结构 





规划 网 站 的 步骤 

口 确定 为 什么 要 创建 这 个 站 点 ， 需 要 展 

示 的 内 容 是 什么 ? 

a 考虑 站 点 的 访问 者 。 应 该 如 何 调整 内 
容 使 之 吸引 这 些 访问 者 ? 
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口 需要 多 少 个 页 面 ? 你 希望 网 站 是 怎样 
的 结构 ?你 是 希望 访问 者 以 某 种 特定 
的 次 序 浏览 网 站 ， 还 是 希望 访问 者 可 
以 自由 地 探索 ? 

O 在 纸 上 夯 出 站 点 结构 的 草图 。 

口 为 页 面 、 图 像 和 其 他 外 部 文件 设计 一 个 
简单 且 一 致 的 命名 规则 (参见 1.6 节 ) 。 


不 要 在 站 点 规划 阶段 花费 过 多 时 间 。 
到 了 适当 的 程度 ， 就 可 以 开始 编写 内 容 和 代 
码 了 。 








要 了 殉 ”如 采 你 对 万 维 网 还 不 太 熟 悉 ， 先 上 网 
和 连连， 从 而 了 解 可 能 的 网 站 形式 。 可 以 从 况 


争 对 手 的 网 站 开始 入 手 。 
在 纸 上 画 出 网 站 组 织 的 文件 夹 结构 


(如 图 2.1.1 所 示 ) 是 一 项 常见 的 工作 ， 但 并 
非 必 需 的 。 参 见 2.6 节 。 


Erin Kissane 的 文章 “A Checklist for 
Content Work” (www.alistapart.com/articles/ 
a-checklist-for-content-work/ ) 的 一 部 分 讲解 了 
如 何 开始 制作 网 站 内 容 。 这 也 是 她 关于 内 容 
战略 的 书 的 一 部 分 。 


如 果 你 不 是 设计 师 ， 或 者 只 是 一 位 
设计 新 手 ， 正 在 寻找 关于 如 何 创建 有 吸引 力 
的 、 有 效 的 站 点 的 指导 ，Jason Beaird 的 《 完 
美 网 页 的 视觉 设计 法 则 》 (The Principles of 
Beautiful Web Design, SitePoint, 2010) 或 许 
会 引起 你 的 兴趣 。 


2.2 创建 新 的 网 页 


创建 网 站 并 不 需要 特殊 的 工具 。 你 可 以 








使 用 任何 文本 编辑 器 ， 甚 至 是 Windows 自 带 
的 记事 本 Notepad, "nl 2.2.1 和 图 2.2.3 所 示 ， 
或 者 OS X 上 的 免费 软件 TextWrangler ( www. 
barebones.com/products/textwrangler ) , 如 图 
2.2.1 和 图 2.2.2 所 示 。 (Mac 也 自 带 一 款 编辑 
需 ， 名 为 TextEdit， 但 它 在 OS X 某 些 版 本 中 
存在 漏洞 , 使 之 无 法 正确 处理 HTML 文件 。) 


&& TextWrangler il Edit Text View Search Window £! 多 X Help 
AOP, — ext Di ent 3N 









New with Stationery 





?! ma] d» (with selection — | 
AME Open... zo (with Clipboard) | 
se untitedte Open from FTP/SFTP Server... ON xurwindow ARN | 
1 Open File by Name... 

Open Counterpart Xt Disk Browser THN 


Open Recent "| FTp/SFTP Browser 


Reopen Using Encoding 


Edit Format View Help 





22.44 打开 文本 编辑 器 。 在 编辑 器 中 出 现 的 空 
白文 档 中 输入 HTML,， 或 者 先 选择 File ^ New. 
实际 的 菜单 选项 可 能 略 有 差异 。 如 果 使 用 
TextWrangler (Mac) ， 就 是 File 一 New 一 Text 
Document ( 文件 一 新 建 一 文本 文档 ) ， 如 上 半 部 
分 所 示 。 下 半 部 分 显示 的 是 Notepad ( Windows ) 
的 选项 

















8.0.0, * untitled text 
P [Ta] @ (New Document) PE 


4i» untitled text $ im. - 

















1j1 |(none) $ Unicode (UTF-8) $| Unix (LF) $|) 0/0/1 


2.2.2 在 Mac 上 ， 可 以 使 用 TextWrangler 编写 
网 页 的 HTML 代码 。 下 文 提示 部 分 列 出 了 一 些 功 
能 更 强 的 编写 代码 的 Mac 编辑 器 
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File Edit Format View Help 


























图 2.2.3 这 是 记事 本 ，Windows 用 户 用 以 创建 
HTML 页 面 的 最 基本 的 程序 。 也 可 以 使 用 其 他 的 编 
ds (参见 提示 ) 




















创建 新 网 页 的 步骤 

(1) 打开 文本 编辑 器 。 

(2) 选择 File 一 New C 文件 一 新 建 ) 创建 
一 个 新 的 空白 文档 ， 如 图 2.2.1 所 示 。 

(3) 按照 本 书 其 余部 分 的 解释 ( 从 第 3 章 
开始 ) 创建 HTML 内 容 。 

(4) 一 定 要 按照 2.3 节 中 的 说 明 保存 文件 。 














Æ OS X fe Windows 上 都 有 很 多 专门 
LC 
它们 的 代码 提示 和 代码 补 全 功能 让 你 可 以 更 
准确 、 更 快速 地 编写 代码 ; 它们 会 将 代码 突 
出 显示 ， 方 便 区 分 HTML 元 素 和 其 中 的 文本 
内 容 ; 它们 还 有 其 他 有 用 的 功能 。 记 事 本 没 
有 这 些 功能 。 有 不 少 免 费 的 HTML 编辑 器 
不 过 一 些 收费 的 编辑 器 也 值得 购买 ， 通 常 
可 以 在 购买 之 前 进行 试用 


OSX 的 流行 编辑 器 包括 BBEdit( www. 
rA A | id . Coda 


( www.panic.com/coda/) , Espresso ( http:// 





macrabbit.com/espresso/ ) , Sublime Text 

( www.sublimetext.com ) 以 及 TextMate (http:/ 
macromates.com ) 。( 通 常 可 以 认为 TextWrangler 
是 BBEdit Lite 的 简化 版 。) 其 中 TextMate 是 
最 流行 的 ， 尽 管 竞争 对 手 也 在 乔 食 其 用 户 群 。 
Sublime Text 也 有 Windows 版 本 。Windows 下 

的 编辑 器 还 有 很 多 ， 如 EText Editor ( www. 
e-texteditor.com ) 、Notepad++ ( http://notepad- 
plus-plus.org ) ， 等 等 。 在 网 上 搜索 “HTML 28 
辑 器 ”可 以 找到 更 多 的 编辑 器 。 


使 用 上 面 列 出 的 某 种 编辑 器 创建 新 网 
D 要 编辑 已 经 存在 的 页 

， 只 需 在 文本 编辑 器 中 选择 File 一 Open( 文 
一 打开) GRAM (参见 2.4 节 ) 。 
可 以 参照 本 书后 面 的 章节 为 页 面 添加 自己 的 
HTML 和 CSS. 


请 不 要 使 用 Microsoft Word 这 样 的 文 
字 处 理 软件 编写 HTML 页 面 。 它 们 会 在 文件 
里 添加 一 些 无 用 的 或 无 效 的 代码 。 


2.3 ”保存 网 页 


用 文本 编辑 器 创建 的 网 页 需要 在 多 种 平 
台 上 的 多 种 浏览 器 查看 。 为 了 让 所 有 这 些 程 
序 都 能 访问 网 页 ， 网 页 需要 保存 为 通用 的 “ 纯 
文本 ”格式 ， 不 包含 文字 处 理 软件 可 能 应 用 
的 任何 专用 格式 化 信息 。 

为 了 让 浏览 器 ( 和 服务 需 ) 能 识别 网 
页 并 知道 解释 其 中 包含 的 标记 ， 网 页 文件 应 
在 文件 名 中 使 用 .html 或 .htm 作为 扩展 名 。 
这 样 做 也 可 以 将 网 页 文件 与 不 是 网 页 的 普通 
文本 文件 区 分 开 来 。 上 述 两 种 扩展 名 都 可 以 
用 ,但 通常 还 是 使 用 .html， 因 此 推荐 读者 使 
用 .html 作为 文件 扩展 名 。 



































20 $23 处 理 网 页 文件 








有 了 .html 扩展 名 ， 网 页 的 图 标 会 显示 为 
系统 默认 浏览 器 的 图 标 ， 而 不 是 用 来 编写 这 
个 文件 的 编辑 带 的 图 标 ， 如 图 2.3.1 所 示 。 双 
击 网 页 文件 会 在 浏览 絮 中 打开 它 ， 而 不 是 在 
文本 编辑 锅 中 。 这 对 于 在 浏览 锅 中 测试 页 面 
来 说 很 方便 ,但 却 为 编辑 网 页 增加 了 一 个 额 


外 的 步骤 (参见 2.5 节 ) 。 
e | webpage.html 
HTML File 
1 KB 





^ 5ales,xlsx 
图 EH | Microsoft Office Excel Worksh,,， 
zb] o kp 


图 2.3.1. Excel 工作 短文 件 的 扩展 名 为 .xlsx， 用 
Excel 的 图 标 进行 标识 (上 图 ) 。 如 果 双 击 它 ， 就 
会 在 Excel 中 显示 它 。 对 于 网 页 文件 ， 无 论 用 哪 
种 文本 编辑 器 创建 ， 它 们 的 扩展 名 都 是 .html 或 
.htm， 并 采用 系统 默认 浏览 器 ( 这 里 是 Firefox ) 的 
图 标 进 行 标识 。 双 击 它 会 在 默认 浏览 器 ( 而 不 是 文 
本 编辑 器 ) 中 显示 

总 之 ， 保 存 文件 时 ， 需 要 将 文件 保存 为 
纯 文 本 格式 , 并 使 用 .html 或 .htm 作为 扩展 名 。 


保存 网 页 的 步骤 

(1) 创建 网 页 之 后 ， 在 文本 编辑 器 中 选 
fé File — Save As (文件 一 另存 为 ) W 
图 2.3.2 所 示 。 

(2) 在 随后 弹出 的 对 话 框 中 ， 选 择 纯 文 本 
或 文本 文档 (或 别 的 叫 法 ) 作为 文件 格式 。 

(3) 为 文档 添加 .html 或 .htm 的 扩展 名 (这 
一 点 非常 重要 ) 。 

(4) 选择 要 保存 网 页 的 文件 夹 。 

(5) 点 击 Save ( 保存 ) ， 如 图 2.3.3 和 图 
2.3.4 所 示 。 



































(File) Edit Format View Help 





2.8.3 在 文本 编辑 器 中 选择 File — Save As 














Filename: b tml 





Save as type: [Test Documents (it) 


tns i immi ml 
| 











æ Browse Folders 





图 2.3.3 在 记事 本 中 ， 为 文件 名 添加 .html 或 .htm 
的 扩展 名 ， 在 Save as type ( 保存 类 型 ) 下 拉 菜 单 
中 选择 文本 文档 ， 确 保 Encoding ( 编码 ) 选择 的 是 
UTF-8 (参见 最 后 一 项 提示 ) ， 点 击 Save。 在 其 他 
文本 编辑 器 中 , 选项 可 能 并 不 相同 (不 过 是 相似 的 ) 











AOO unttedtext 








Save As: | basic.html (4) 








Goe) = m) (E website s| (a 
| FAVORITES 
A Applications 
[53 Desktop 
[8 Documents 

© Downloads 
Movies 
JÌ Music 
@ Pictures 
SHARED 
轩 brucelaptop 
| 
| [Save as stationery 
Linebreaks| Unix (LF) +] 
Encoding| Unicode (UTF-8) —— — -— 


[ Cancel | sme 


2.3.4 在 TextWrangler 中 ， 为 文件 起 名 ， 选 择 
保存 位 置 。TextWrangler 默 认 以 UTF-8 进行 编码 (一 
般 情 况 下 ， 这 就 是 应 该 选用 的 编码 ) ， 不 过 你 也 
可 以 从 Encoding 下 拉 菜 单 中 选择 其 他 编码 。 点 击 
Save 保存 文件 




















| 
| New Folder | 




















使 用 .html 还 是 .htm 并 无 区 别 ， 但 推 
荐 使 用 .html， 因 为 它 更 常见 。 无 论 你 用 哪 种 
扩展 名 ， 请 保持 一 致 ， 因 为 使 用 相同 的 扩展 


名 有 助 于 后 续 记 住 URL。 
CHES 即使 已 经 指定 了 .html 或 .htm 的 扩展 


名 ，Windows 上 的 某 些 文本 编辑 器 也 会 在 文件 
名 未 尾 加 上 默认 扩展 名 。 (注意 大 多 数 专门 编 
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辑 HIML 页 面 的 编辑 器 并 不 存在 这 个 问题 。) 
这 样 文件 名 就 变 成 了 webpage.html.txt， 这 样 
的 文件 无 法 在 浏览 器 中 查看 。Windows 通常 
会 隐藏 扩展 名 ， 也 导致 这 个 问题 变 得 隐蔽 ， 
它 尤 其 容易 困扰 新 手 。 有 两 个 解决 办 法 : 一 
个 是 在 首次 保存 文件 时 将 文件 名 包围 在 双 引 
号 中 ， 这 样 能 防止 添加 额外 的 扩展 名 ; 另 一 
个 是 让 Windows 显示 文件 扩展 名 ， 方 法 如 图 
2.3.5 所 示 ， 从 而 可 以 看 见 程序 自动 添加 的 扩 
展 名 并 将 其 删除 。 

















General| View | Search| 








Folder views 
i You can apply the view (such as Details or Icons) that 
you are using for this folder to all folders of this type. 


Advanced settings: 
Display file size information in folder tips 
[T] Display the full path in the title bar (Classic theme only) 
Hidden files and folders 
(9) Dont show hidden files, folders. or drives 
®© Show hidden files, folders, and dives 
[V] Hide empty drives in the Computer folder 
Hide extensions for known file types 
lide protected operating system files (Recommended) 
[7] Launch folder windows in a separate process 
"| Restore previous folder windows at logon 
V| Show drive letters 
W| Show encrypted or compressed NTFS files in color M 


Restore Defaults 


Cancel 




























































































图 2.3.5 1E Windows 资源 管理 器 中 ， 选 择 Organize 一 
Folder and search options ( 组 织 一 文件 夹 和 搜索 选 
JW), 或 者 Tools — Folder Options (工具 一 文件 夹 
选项 ) (取决 于 你 使 用 的 Windows 版 本 ) ， 显示 
图 中 的 对 话 框 。 点 击 View ( 查看 ) 选项 卡 ， 向 下 
滚动 ， 直 到 看 到 Hide extensions for known file types 

(隐藏 已 知 文件 类 型 的 扩展 名 ) 。 如 果 想 在 桌面 上 
看 到 文件 的 扩展 名 ( 如 .html ) ， 要 确保 这 个 选项 
是 未 选中 的 











ED ARKH AALA, X 
件 会 以 系统 默认 字符 编码 保存 。 如 果 需 要 创 
建 其 他 编码 的 网 页 (或 者 是 因为 网 页 里 包含 
一 些 特殊 符号 或 其 他 语言 的 文字 ) ， 需 要 使 
用 可 以 选择 编码 类 型 的 文本 编辑 器 。 通 常 ， 
UTF-8 是 最 好 的 选择 。 如 果 编 辑 器 中 可 选择 
的 文件 编码 类 型 包括 “UTF-8， 不 含 BOM” 
或 类 似 的 选项 ， 请 选择 该 项 。 否 则 ， 就 选择 
UTF-8， 如 图 2.3.6 所 示 。 有 时 ,编辑 器 的 
UTF-8 模式 并 不 包含 BOM， 但 编码 类 型 选择 
菜单 中 并 未 显 式 指出 这 一 点 。 (BOM 的 含义 参 
JL http://en.wikipedia.org/wiki/Byte order mark. 
做 好 看 不 懂 的 准备 吧 ! ) 


EM, Y Unicode urr.g) E EE | 
Unicode (UTF-16) | 
[ New Foldet Unicode (UTF-8, with BOM) | Cancel | [-Save. ] 
— | Unicode (UTF-16, no BOM) 
Unicode (UTF-16 Little-Endian) | 
Unicode (UTF-16 Little-Endian, no BOM) 


Chinese (GB 18030) 
Japanese (ISO 2022-JP) 
Japanese (Mac OS) 

Japanese (Shift JIS) 

Korean (Mac OS) 

Simplified Chinese (Mac OS) 
Traditional Chinese (Mac OS) 
Western (ISO Latin 1) 
Western (ISO Latin 9) 
Western (Mac OS Roman) | 
Western (Windows Latin 1) 








图 2.3.6 许多 文本 编辑 器 允许 为 文件 选择 编码 ， 
从 而 可 以 在 同一 个 文档 中 保存 不 同 语言 中 的 符号 
和 字符 。 大 多 数 情 况 下 ， 推 荐 选择 UTF-8。 选 择 
“UTF-8， 不 含 BOM” 选 项 (如 果 有 的 话 ) 。 
和 否则， 直接 选择 UTF-8。 有 的 编辑 器 (如 图 中 的 
TextWrangler ) 默认 选择 该 项 





























2.4 指定 默认 页 面 或 主页 


大 多 数 服务 器 都 会 根据 文件 名 识别 每 
个 文件 夹 中 的 默认 页 面 。 大 多 数 情 况 下 ， 
系统 会 将 index.html 识别 为 默认 页 面 ， 如 图 
2.4.1。 如 果 没 有 index.html， 就 会 继续 寻找 
index.htm, default.htm 等 文件 和 名。 如果 访问 考 
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输入 带 目录 的 URL， 但 没有 指定 文件 名 ， 那 
么 就 会 打开 默认 页 面 ， 如 图 2.4.2 所 示 。 





Save As: index.html - l [4] 
E 2.4.1. 将 文件 保存 为 index.html， 从 而 指定 这 个 
文件 是 目录 下 的 默认 页 面 

















$ Darcelona's Architect * La Sagrada Familia * Park Guell 


BARCELONA'S ARCHITECT 
Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet 
ht to the chure aghts and 










LA SAGRADA FAHÍLIA 


The cornplicatedly named 
li | the E«piatory Temple of 
even the 
d its ih 


PARK GUELL 





2.4.2 ” 当 访 问 者 输入 目录 的 路 径 而 没有 指定 文 
件 名 时 ， 就 会 打开 使 用 默认 名 称 的 页 面 。 在 这 个 
例子 中 ,输入 的 URL 是 http://bruceontheloose.com/ 
htmlcss/examples/antoni-gaudi/。 如 果 输 入 http:// 
bruceontheloose.com/htmless/examples/antoni-gaudi/ 
index.html， 会 显示 相同 的 页 面 























在 网 站 最 顶层 目录 (通常 称 为 根 目录 ) 
中 创建 的 默认 页 面 (通常 为 index.html ) 是 网 
站 的 主页 。 当 访问 者 只 输入 域名 而 没有 指定 
WES E ( 如 www.yourdomain.com ) HY, WÈ 
会 显示 这 个 页 面 。 

类 似 地 ,可 以 为 网 站 的 任何 一 个 目录 (其 
至 每 一 个 目录 ) 创建 默认 页 面 。 例 如 ， 网 站 
中 /products/ 3X, /about-us/ 目录 的 着 陆 页 ( 即 
首页 ) 也 应 该 是 index.html， 只 不 过 它们 放 在 
各 自 的 目录 里 (目录 就 像 是 你 自己 计算 机 的 
文件 夹 ) 。 网 站 的 访问 者 通常 通过 主页 或 每 
页 都 有 的 主导 航 访问 这 些 页 面 。 



































指定 网 站 主页 或 含 目录 的 着 陆 页 的 步骤 
在 目标 文件 夹 中 ， 将 文件 保存 为 index. 
html (参见 2.3 节 ) 。( 当 你 将 文件 上 传 到 网 
站 的 服务 器 以 后 ， 如 果 index.html 无 法 起 到 默 
认 页 面 的 作用 ， 请 向 Web 主机 提供 商 咨 询 。 
关于 将 网 页 上 传 到 服务 器 ， 人 参见 第 21 章 。 ) 


CES 如 果 目 录 中 没有 默认 页 面 ， 有 的 服务 
器 就 会 将 目录 文件 列表 显示 出 来 ( 你 可 能 并 不 
希望 向 访问 者 暴露 这 些 内 容 ) 。 为 了 防止 这 种 
情况 的 发 生 ， 应 该 在 网 站 每 一 个 包含 HTML 页 
面 的 目录 下 创建 一 个 默认 页 面 。 另 一 种 办 法 
是 修改 服务 器 的 配置 ， 将 文件 列表 隐藏 起 来 
(如 果 它 们 已 被 隐藏 ， 也 可 以 将 它们 显示 出 
来 ) 。 对 于 包含 图 像 、 媒 体 文件 、 样 式 表 以 及 
JavaScript 等 资源 的 目录 ， 建 议 将 文件 列表 隐 
藏 。 如 果 不 知 道 如 何 修改 服务 器 配置 ， 请 向 
Web 主机 提供 商 咨询 。 








2.5 ”编辑 网 页 


因为 网 页 在 大 多 数 情况 下 是 通过 浏览 如 
查看 的 ， 所 以 在 桌面 上 双击 网 页 文件 ， 会 启 
动 默认 浏览 絮 并 显示 它们 。 如 果 想 编辑 网 页 
文件 ， 需 要 在 文本 编辑 器 中 手工 打开 它 。 


编辑 网 页 的 步骤 

(1) 打开 文本 编辑 器 。 

(2) 选择 File — Open, 

(3) 找到 包含 目标 文件 的 目录 。 

(4) 如 果 没 有 看 到 目标 文件 ,选择 All 
Files (全 部 文件 ) 选项 (或 类 似 的 叫 法 ) ， 
如 图 2.5.1 和 图 2.5.2 所 示 。 在 不 同 的 程序 或 
平台 ， 这 个 选项 的 叫 法 和 位 置 都 有 细微 的 差 
异 ， 如 图 2.5.3 所 示 。 

(5) 点 击 Open， 就 可 以 开始 编辑 文件 了 。 
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website 












2.5.1 在 Windows 的 一 些 文本 编辑 器 ( 如 记事 
本 ) 中 ,不 会 自动 看 到 HTML 文件。 选择 AIL Files 
可 以 查看 所 有 文件 











Date modified Type 
11/15/200.804 PM — HTML Document. 














| 
- 
eser Ce Gee 


2.5.2 显示 所 有 文件 以 后 选中 要 编辑 的 HTML 
文件 ， 点 击 Open 







Open in Same Window 
Open with ^| Internet Explorer 
3 noed y 


Choose default program... 





2.5.3 Æ Windows 中 , 还 可 以 右 击 文 档 的 图 标 ， 
在 弹出 菜单 中 选择 Edit 或 Open。 在 Mac E, fii 
图 标 ， 在 弹出 菜单 中 选择 Open With， 再 选择 要 使 
用 的 文本 编辑 器 








通常 , 要 保存 对 已 有 文档 进行 的 修改 ， 
只 需要 选择 File 一 Save (文件 一 保存 ) 即 可 ， 
不 必 担 心 2.3 节 中 提 到 的 格式 问题 。 
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在 文件 数量 变 得 很 大 之 前 ， 最 好 考虑 好 
将 它们 放 在 什么 地 方 。 通 篆 〈 但 非 必须 ) 为 
网 站 的 主要 区 块 创建 单独 的 文件 来， 使 相关 
的 HTML 页 面 放 在 一 起 。 


组 织 文 件 的 步骤 

(1) 创建 一 个 主 文件 夹 或 目录 存放 网 站 上 
所 有 可 用 的 资料 。 在 Mae E, TE Finder 中 选 
f£ File 一 New Folder (文件 一 新 文件 夹 ) ， 
如 图 2.6.1 所 示 。 在 Windows 中 , 右 击 桌面 (或 
你 选择 的 文件 夹 ) ， 选 择 New 一 Folder (新 
E 一 文件 来 ) ， 如 图 2.6.2 所 示 。 然 后 为 文 
件 夹 命 名 。 

(2) 根据 网 站 的 组 织 结构 创建 子 文件 夹 ， 
如 图 2.6.1 和 图 2.6.3 所 示 。 例 如 ， 可 以 考虑 
为 网 站 的 每 个 部 分 创建 单独 的 文件 夹 ， 并 根 
据 需要 在 其 中 创建 单独 的 子 文件 夹 。 

(3) 为 网 站 的 图 片 创建 顶层 文件 夹 是 惯 
例 ， 还 可 以 根据 网 站 结构 划分 或 其 他 标准 创 
建 子 文件 夹 ， 方便 对 图 片 进行 组 织 。 另 一 种 
方法 就 是 创建 名 为 Assets 的 顶层 文件 夹 ， 将 
图 片 同 其 他 资源 ( 如 视频 、 样 式 表 等 ) 的 文 
件 夹 都 放 在 其 中 。 (我 们 将 从 第 7 章 开始 学 
习 样 式 表 。 ) 


JE Edit View co Window H 
3x 


























New Finder Window N 
New EN 
Ne th Selection ^N 
N ider XEN 
N older 
Op *0 
Open With > 
P sp 
Ch zw website 
e E 
eoo = website 
xD rn m) | r) 
ze FAVORITI ts .. Name 
) E Al My Files LELZZ 
SR E img 
*T @ Airbrop * 入 news 
次 Application: E products 
E Desktop. 5 E 
cs 
让 Document "ts > B foot 
*F eo Downloads ^^,» gj. 
E Movies (index.html 
J Music 
a Pictures. 








2.6.1 fE Mac E, 3&ffÉ New Folder， 再 为 文件 
夹 命名 。 为 网 站 每 个 不 同 的 部 分 创建 独立 的 文件 夹 
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Arrange by 上 lie 在 浏览 器 中 查看 网 页 的 步骤 
Vien 2.9. m (1) 打开 浏览 器 
Sort by [: (el Shortcut R . 
Group by > | (Æ Bitmap image Q) 选择 File - — Open ( 3X Open File, 
Refresh Contact Open Page ) , 实际 叫 法 取决 于 所 使 用 的 浏览 
paste E] Journal Document 器 但 不 能 是 Open Location ( 打开 位 置 ) ， 
Paste shortcut 自 Rich Text Document B 

- L] Text Document 如 图 2:7. 所 示 。 

- uum ) Xf - Compressed (zipped) Folder (3) 在 弹出 的 对 话 框 中 ， 找 到 目标 文件 
New » Briefcase ` N x 

Em c 所 在 的 文件 来， 选中 该 文件 ， 点 击 Open， 如 

roperties 











图 2.6.2 在 Windows 里 ， 在 桌面 或 资源 管理 器 中 
右 击 ， 再 选择 New 一 Folder 





G Q» | 县 < My Documents » website ， v [#4] | Seorcn website i 
fiers Edit View Tools Hep —— 一 一 


uai Shar aei New folder 








s- mo 





Documents library NER er Y 


a Librarie di 
4 E] Documents | 
4E ui iD about 
|| websre y cg dime 
about-us q Drews 
i IJ products 
D shared 
dg] index.html 











图 2.6.3 根据 需要 ， 可 以 将 文件 夹 分 解 成 多 个 子 
文件 夹 


ED 使 用 短 的 、 描 述 性 的 名 称 作为 文件 和 
文件 夹 的 名 称 ， 使 用 短 横 线 ( 而 不 用 空格 ) 
分 隔 不 同 的 单词 。 全 部 使 用 小 写字 母 ， 让 
URL 更 容易 输入 ， 页 面 更 容易 被 访问 到 。 关 
于 创建 文件 名 的 细节 ， 参 见 1.6 节 。 


2.7 在 浏览 器 中 查看 网 页 


创建 网 页 之 后 ， 你 肯定 希望 看 看 它 在 浏 
览 器 中 显示 的 样子 。 实 际 上 ， Ern 
道 访 问 者 使 用 什么 浏览 器 (不同 的 浏览 
SUEDE UEN IL 

个 浏览 器 查看 页 面 。 











图 2.7.2 所 示 。 页 面 会 显示 在 浏览 器 中 ， 如 图 
2.7.3 所 示 ， 显 示 效 果 与 发 布 到 服务 需 的 网 页 
相同 (关于 发 布 网 页 ， 参 见 第 21 章 ) 。 对 于 
不 同 的 浏览 器 ， 这 些 步 又 可 能 有 些 差异 。 

| Eile Edit View — History 


New Tab Ctrl+T 
Mew Window Ctrl+N 





Save Page ås... Ctrl+5 
Send Link... 


Page Setup... 
Print Preview 
Print... Ctrl+P 


Work Offline 
Exit 





2.7.4 在 目标 浏览 器 ( 此 处 为 Firefox ) 中 选 
ff File 一 Open File; Internet Explorer 中 为 File 一 
Open 





Open File 了 下 xx| 


Look in: | B photobarcelona 3 02 com 





fi index.html z] 
far Files zl 


LL! 
[TUM File name: 
Places 
Files of type: 


Lem] 
gest 





2.1.2. ”选择 要 打开 的 文件 并 点 击 Open 按钮 
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recent entries 
Hospital Sant P. 





Cathedral Cloister 








图 2.7.3 页 面 出 现在 浏览 器 中 。 仔 细 检 查 一 下 ， 


看 看 它 是 否 符合 你 的 预期 


通常 还 可 以 双击 网 页 图 标 来 查看 它 。 
me 经 打开 ， 还 可 以 将 网 页 图 标 拖 到 
浏览 器 窗口 来 打开 它 。 一 旦 掌握 这 些 技巧 ， 它 
们 往往 是 在 浏览 器 中 查看 网 页 的 最 简单 方法 。 


一 些 现代 浏览 器 没有 File — Open 这 样 的 
菜单 选项 来 打开 网 页 , 试 试 上 文 提 到 的 拖 搜 方法 。 


如 果 网 页 没有 出 现在 Open 对话 框 中 ， 
那么 x ia 下 文件 是 否 以 纯 文 本 格式 保存 ， 
并 且 以 html 或 .htm 为 扩展 名 (参见 2.3 节 ) 。 


在 浏览 器 中 查看 网 页 之 前 ， 不 需要 在 
广 示 编辑 器 中 关闭 六 要 但 一 定 要 保存 文件 。 
在 浏览 器 中 打开 网 页 之 后 ， 如 果 又 在 文本 编辑 
器 中 对 页 面 作 了 修改 , 那么 需要 再 次 保存 文件 ， 
并 在 浏览 器 中 刷新 页 面 ( 可 以 重复 在 浏览 器 
首次 打开 网 页 的 步骤 ， 但 那样 做 比较 慢 ) 。 


在 Web 服务 器 上 发 布 网 站 (参见 第 
21 章 ) 之 后 ， 访 问 者 才能 看 到 网 站 。 


2.8 借鉴 他 人 灵感 
学 习 其 他 网 页 开发 和 设计 人 员 如 何 创建 


页 面 是 提高 HTML 代码 水 平 最 容易 的 方法 之 
—. Ži, HTML 代码 很 容易 查看 和 学 习 。 
不 过 ,文本 内 容 、 图 像 、 音 频 、 视 频 、 样 式 
表 及 其 他 外 部 文件 可 能 受 版 权 保护 。 通 常 的 
做 法 是 借鉴 其 他 人 的 页 面 为 自己 的 HTML 寻 
找 灵感 ， 再 创建 自己 的 内 容 。 


1. 使 用 View Source 查看 其 他 设计 者 的 
HTML 代码 

(1) 在 浏览 需 中 打开 网 页 。 

(2) 选择 View Source ( 查看 源 代 码 ， 或 其 
他 浏览 器 中 的 类 似 选项 ) ， 如 图 2.8.1 和 图 2.8.2 
所 示 。 这 时 会 显示 HTML 代码 , 如 图 2.8.3 所 示 。 

(3) 如 果 愿 意 ， 可 以 保存 该 文件 以 作 进 一 
步 研究 。 


加 Firefox File Edit View History Bookmarks ESE Window Help 













The Ephemeral Blue Flax 


Tam continually amazed at the beautiful, delicate Blue Flax that somehow 
| morning, yet nota single at They arc the very definition 


took hold in my garden. They are awash in color every 
of ephemeral. 








2.8.4 所 有 的 桌面 浏览 器 都 有 让 你 查看 页 面 
HTML 源 代 码 的 菜单 选项 。 选 项 的 名 称 可 能 是 View 
Source， 也 可 能 是 PageSource( 在 Firefox 中 ， 
如 图 ) ， 或 者 其 他 类 似 的 名 称 。 在 Chrome 中 为 
Tools — View page source (工具 一 查看 页 面 源 代 码 ) 


























图 2.8.2 大 多 数 浏览 器 还 可 以 在 页 面 上 右 击 ， 然 
后 在 弹出 的 菜单 中 选择 View Source ( 或 者 别 的 类 
似 叫 法 ) 。 图 上 显示 的 是 Chrome 中 的 菜单 。 这 通 

是 查看 源 代码 最 方便 的 方法 ， 因 为 很 难 在 主 菜 单 
或 子 菜单 上 找到 该 选项 
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e view-source:bruceont 


Q fi |O view-source:bruceontheloose.com/html Sy | ®~ 


2| «html lang-"en"» 
3| «head» 

<meta charset-"utf-8" /> 
5 4title»Blue Flax (Linum lewisii)«/title» 
ê| </head> 
7| <body> 

«article» 

Xhi»The Ephemeral Blue Flaxc/hi» 


<img src-"blueflax.jpd" 
Width="300" height-"175" alt-"Blue Flax (Linum 
lewisii)" /> 


3 <p>I am continually 
Xem»amazedc/em» at the beautiful, delicate «a 
href-"http://en.wikipedia.org/wiki/Linum lewisii" 
rel-"external" title-"Learn more about the Blue 
Flax"»Blue Flaxc/a» that somehow took hold in my 
garden. They are awash in color every morning, yet 
not a single flower remains by the afternoon. They 
are the very definition of ephemeral.«/p» 

14 «/article» 

5| «/body» 

lā | </html> 





图 2.8.3 现代 浏览 器 在 其 自身 的 选项 卡 或 窗口 中 
显示 源 代码 ( 如 图 所 示 ) ， 而 旧 的 浏览 器 可 能 在 特 
定 的 文本 编辑 器 中 显示 。 页 面 内 容 的 颜色 与 HTML 
元 素 、 属 性 和 属性 值 的 颜色 是 区 分 开 来 的 。 这 称 为 
语法 高 亮 (syntax highlighting) 。 左 侧 显示 的 行 号 
并 不 是 HTML 代码 的 一 部 分 ， 也 并 非 所 有 的 浏览 
器 都 会 在 查看 源 代码 模式 中 显示 行 号 。 它 们 只 是 
Chrome 在 查看 源 代码 窗口 中 提供 的 一 种 指示 












































2. 通过 开发 者 工具 查看 其 他 设计 者 的 HTML 
代码 

查看 网 页 源 代码 的 男 一 种 方法 是 使 用 浏 
览 器 的 开发 者 工具 。 不 同 浏览 器 提供 的 开发 
者 工具 并 不 一 样 ， 但 有 些 功 能 是 一 样 的 。 

这 些 工具 提供 了 一 种 交互 式 的 查看 源 代 
码 的 视图 。 可 以 审查 页 面 特定 部 分 的 HTML 
和 CSS， 在 浏览 器 中 编辑 代码 ， 并 立即 查看 
修改 后 的 效果 。 可 以 对 任何 网 站 (不 仅仅 是 
自己 的 ) 使 用 开发 者 工具 。 使 用 开发 者 工具 
作 的 修改 都 是 临时 的 ， 这 些 工具 并 未 真正 修 
改 页 面 的 HTML 和 CSS。 开 发 者 工具 是 学 习 














HTML 和 CSS 不 可 多 得 的 资料 ， 通 过 它们 可 
以 查看 某 个 特定 的 效果 是 如 何 实现 的 ， 可 以 
随意 改动 代码 而 不 必 担 心 破坏 任何 东西 。 

关于 开发 者 工具 ( 既 有 现代 浏览 器 的 ， 
BARNEA) 的 信息 ， 参 见 20.1 节 “ 浏 
览 器 开发 者 工具 ”。 


不 存在 关于 谁 能 在 万 维 网 上 发 布 网 
站 的 规则 。 这 就 是 万 维 网 的 伟大 之 处 一 一 它 
是 一 种 进入 门槛 很 低 的 开放 媒体 。 你 可 以 是 
一 名 新 手 ， 一 位 专家 ， 或 者 介 于 二 者 之 间 的 
角色 。 查 看 其 他 网 站 源 代码 时 应 该 记 住 这 一 
点 ， 如 果 有 些 代码 看 起 来 并 不 怎么 样 ， 不 要 
仅仅 因为 该 网 站 放 在 网 上 就 认为 其 制作 者 
知道 的 比 你 多 。 有 大 量 网 站 可 以 作为 编码 最 
佳 实践 的 范例 ， 也 有 大 量 网 站 做 得 并 不 那 
么 理想 。 保 持 批判 的 态度 ， 如 果 对 某 项 技 
术 的 合理 性 有 所 怀疑 ， 请 查看 本 书 或 其 他 
资源 。 





CES 要 保存 代码 ， 可 以 将 代码 从 View 
Source 窗口 中 复制 到 文本 编辑 器 中 ， 再 保存 
文件 。 


要 同时 保存 源 代 码 及 网 页 资源 (如 
图 像 ) ， 在 大 多 数 浏览 器 中 可 以 选择 File 一 
Save As (或 File 一 SavePageAs， 文 件 一 页 
面 另存 为 ) 。 不 过 ,保存 页 面 时 ,浏览 器 可 
能 改写 代码 的 菜 些 部 分 ， 因 此 代码 与 使 用 上 
一 条 提示 保存 的 代码 并 不 完全 一 样 。 


GNES 关于 查看 网 页 的 CSS， 参 见 8.8 节 。 


基本 HTML 结构 








本 章 内 容 
口 开始 编写 网 页 
口 创建 页 面 标题 
口 创建 分 级 标题 
口 理解 HTMLS 的 文档 大 纲 
O 对 分 级 标题 进行 分 组 
口 普通 页 面 构成 
a 创建 页 眉 
口 标记 导航 
a 创建 文章 
口 定义 区 块 
口 指定 侧 栏 
口 创建 页 脚 
口 创建 通用 容器 
口 使 用 ARIA 改进 可 访问 性 
O 为 元 素 指 定 class 或 id 名 称 
O 为 元 素 添 加 title 属性 
口 添加 注释 

本 章 讨论 的 是 构建 文档 基础 和 结构 所 需 
的 HTML 元 素 ， 即 网 页 内 容 的 大 纲 和 主要 的 
语义 化 容 需 。 

你 将 学 到 以 下 内 容 : 
口 开始 编写 网 页 
Q HTMLS 的 文档 大 纲 
口 h1 ~h6、hgroup header, nav, article, 


























section, aside, footer 及 div 元 素 
(其 中 大 多 数 是 HTML5 新 增 的 元 素 ) 





O ARIA 的 role 属性 如 何 提升 页 面 的 可 
访问 性 

O 为 元 素 应 用 class 和 id 属性 

O 为 元 素 应 用 title 属性 

a 为 代码 添加 注释 

创建 清晰 、 一 致 的 结构 不 仅 可 以 为 页 面 
建立 良好 的 语义 化 基础 ， 也 可 以 大 大 降低 在 
文档 中 应 用 层 堆 样式 表 (CSS) 的 难度 (从 第 
7 章 开 始 讲解 CSS ) 。 

如 果 你 还 没有 这 样 做 过 ， 强 烈 建议 你 在 
继续 阅读 前 先 读 读 第 1 章 。 第 1 章 展 示 了 一 
个 简单 的 HTML 页 面 ， 并 解释 了 一 些 基 本 概 
念 。 由 于 那 是 你 第 一 次 接触 网 页 ， 因 此 我 会 
在 这 里 复述 一 些 (但 非 所 有 的 ) 信息 ， 并 假 
定 你 对 其 他 信息 很 熟悉 ， 可 以 基于 它们 开始 
构建 网 页 。 

男 外， 如果 你 读 过 笔者 的 The HTML Pocket 
Guide ， 你 会 发 现 很 多 熟悉 的 材料 。 


3.1 开始 编写 网 页 


每 个 HTML 文档 都 应 该 包含 以 下 基本 成 
分 (如 图 3.1.1 所 示 ) : 
D DOCTYPE; 
O html 元 素 ( 包含 lang 属性 。 该 属性 不 
是 必需 的 ， 但 推荐 加 上 ) ; 
口 head 元 素 ; 
口 说 明 字 符 编码 的 meta 元 素 ; 
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O title 元 素 ; 
口 body 元 素 。 

这 份 HTML 等 同 于 一 张 空白 的 纸 ， 因 为 
body 里 面 没 有 任何 内 容 ， 如 图 3.1.2 所 示 。 








«IDOCTYPE html» 

«html lang-"en"» 

«head» 
«meta charset-"UTF-8" /» 
<title></title> 

</head> 

<body> 


</body> 
</html> 











3.4.1. 这 是 每 个 HTML 页 面 的 基础 。 缩 进 并 不 
重要 , 但 结构 很 重要 。 在 这 个 例子 中 , 默认 语言 ( 由 
lang 属性 设 定 ) 被 设 为 代表 英语 的 en。 字符 编码 
被 设 为 UTF-8 














7! Mozilla Firefox Jan x 


Ele Edit View History Bookmarks Tools Help 


| L| http:;//bruceontheloos...er-03/start-page.html [+] x 











3.4.2. 最少 HTML 基础 代码 在 Firefox 中 显示 
的 样子 。 如 你 所 见 ， 什 么 内 容 也 没有 ! 不 过 ， 很 快 
就 可 以 开始 添加 内 容 了 


在 添加 任何 内 容 或 其 他 信息 之 前 ， 需 要 
先 建立 起 页 面 的 基础 。 


1. 编写 HTML5 页 面 开 头 的 步骤 
(I) 输 A «!DOCTYPE htm>， 声 明 页 面 为 


HIMLS 文档 。( 关于 HIML 早 期 版 本 的 相 
关 信 息 ， 参 见 本 节 末 尾 的 “改进 后 的 HIML5 
DOCTYPE” , ) 

(2) 输入 <html lang-"language-code"», FF 

台 文 档 的 实际 HIML 部 分 。 其 中 ，1anguage- 

code 是 页 面 内 容 默认 语言 的 代码 。 例 如 ， 
«html lang="en"> 表示 英语 ,<html lang="fr"> 
表示 法 语 。 可 用 语言 代码 的 完整 列表 参见 
www.bruceontheloose.com/references/language- 
codes.html., 

(3) 输入 “head>， 开 始 网 页 文档 的 头 部 。 

(4) 输入 <meta charset="UTF-8"/>， 将 文档 
的 字符 编码 声明 为 UTF-8。 如 果 愿 意 ， 也 可 以 
输入 utf-8。 空 格 和 和 斜 杠 是 可 选 的 ， 因 此 «meta 
charset="UTF-8"> 也 是 有 效 的 。 (UTF-8 以 外 的 
其 他 字符 编码 也 是 有 效 的 ， 不 过 UTF-8 的 适用 
面 最 广 ， 很 少 有 需要 用 其 他 编码 的 情况 。 ) 

(5) 输入 title></title>。 这 里 将 包含 页 
面 的 标题 。3.2 节 中 将 讲解 如 何 添加 标题 文字 。 

(6) 输入 </head>, Zi VO c PATI SCR 

(7) 输入 <body>， 开 始 页 面 的 主体 。 这 里 









































是 放置 页 面 内 容 的 地 方 。 
(8) 为 页 面 内 容 预 留 一 些 空 行 。 后 续 章节 
会 讲解 如 何 创建 内 容 。 


(9) 输入 </body>, ER EIR. 

(10) 输入 </html>， 结 束 页 面 。 

步骤 似乎 有 点 多 ,不 过 ， 由 于 所 有 的 页 
面 都 是 这 样 开 始 编 写 的 ， 可 以 使 用 一 个 单独 
的 HTML 页 面 作为 创建 每 个 页 面 的 模板 ， 以 
节省 输入 的 时 间 。 实 际 上 ， 很 多 代码 编辑 融 
都 可 以 为 新 页 面 指定 初始 的 代码 ， 这 样 就 更 
简单 了 。 如 果 你 在 编辑 器 中 没有 找到 Settings 
(设置 ) xk Preferences (偏好 设置 ) 菜单 ， 
可 以 在 Help CAEBI ) 中 搜索 。 





























2. 网 页 的 两 个 部 分 : head 和 body 
快速 回顾 一 下 第 1 章 学 到 的 知识 ,HTML 


3.1 开始 编写 网 页 29 








页 面 分 为 两 个 部 分 : head 和 body, 参见 图 3.1.1。 
DOCTYPE 出 现在 每 个 页 面 的 开头 ， 就 像 一 本 
书 的 序言 。 

在 文档 head 部 分 ， 通常 要 指明 页 面 标 
题 ， 提 供 为 搜索 引擎 ( 如 Google) 准备 的 关 
于 页 面 本 身 的 信息 ， 加 载 样式 表 ， 以 及 加 载 
JavaScript 文件 ( 不过， 出 于 性 能 考虑 ， 多 
数 时 候 在 页 面 底部 </body> 标记 结束 前 加 载 
JavaScript 是 更 好 的 选择 ) 。 随 着 进一步 阅读 
本 书 ， 你 会 看 到 一 些 关 于 这 些 内 容 的 例子 。 
除了 3.2 节 就 要 讲解 的 title， 其 他 head 里 的 
内 容 对 页 面 访问 者 来 说 都 是 不 可 见 的 。 

body 元 素 包 住 页 面 的 内 容 ， 包 括 文本 、 
图 像 、 表 单 、 音 频 、 视 频 以 及 其 他 交互 式 内 容 ， 
也 就 是 访问 者 看 见 的 东西 。 本 书 有 好 几 章 都 
讲述 HTML 的 内 容 相 关 元 素 ， 其 中 一 些 会 在 
本 章 提前 接触 到 。 

















使 用 HTML5 DOCTYPE 可 以 确保 
浏览 器 以 可 靠 的 模式 呈现 页 面 ， 同 时 告诉 
HTML 验证 器 根据 HTML5 允许 的 元 素 和 语 
法 检查 代码 。 第 20 章 会 讨论 HTML 验证 器 。 


改进 后 的 HTML5 DOCTYPE 


有 了 HTML5 以 后 ， 编 写 代码 的 开头 部 分 变 得 


惊讶 ， 特别 是 跟从 前 的 DOCTYPE 相 比 。 


HIMLS5 的 DOCTYPE 不 区 分 大 小 写 。 例 
如 ， 有 的 人 选择 输入 <ldoctype html>。 不 过 ,使 用 
«IDOCTYPE html» 是 更 常规 的 做 法 ， 参 见 图 3.1.1。 


GHES 4k DOCTYPE 的 html 元素 应 该 包 
含 页 面 的 所 有 元 素 ， 参 见 图 3.1.1。 


ABD 妥 确 保 你 的 代码 编辑 器 已 配置 为 
VA UTF-8 保存 文件 ， 与 代码 中 通过 <meta 
charset-"UTF-8" /> 语句 指定 的 编码 相同 ， 参 见 
图 3.1.1。 (如 果 指 定 了 另 一 种 编码 ， 就 按 那 种 
编码 保存 文件 。) 并 非 所 有 的 编辑 器 都 默认 以 
UTF-8 保存 文件 ， 但 大 多 数 编辑 器 可 以 在 菜单 
或 面板 中 选择 编码 (参见 2.3 节 ) 。 如 果 页 面 
没有 设置 为 UTF-8， 有 的 字母 (如 带 重音 符 的 二 
带 波 形 符 ( ~ ) 的 n ) 就 会 变 成 一 些 奇 怪 的 字符 。 


BEE head 元 素 里 的 代码 不 一 定 要 缩 
进 ， 参 见 图 3.1.1。 不 过 ， 缩 进 可 以 让 你 一 眼看 
出 head 从 哪里 开始 ， 包 含 什么 内 容 ， 以 及 在 哪 
里 结束 ,在 有 些 页 面 中 ,head 变 得 很 长 并 不 少见 。 


容易 多 了 。HTML5 t DOCTYPE 短 得 让 人 


Æ HTML 4 fe XHTML 1.0 时 代 ， 有 好 几 种 可 供 选 择 的 DOCTYPE， 每 一 种 都 会 指明 
HTML 的 版 本 ， 以 及 使 用 的 是 过 渡 型 还 是 严格 型 模式 。 由 于 它们 太 难 记 ， 开 发 人 员 不 得 不 每 


次 都 从 某 个 地 方 把 这 些 代 码 复 制 进来 。 


例如 ， 下 面 是 XHTML 严格 型 文档 的 DOCTYPE。 
<IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/ 


— xhtml1-strict.dtd"» 


看 起 来 令 人 费解 。 


幸好 ， 所 有 的 浏览 器 ， 无 论 新 旧 ， 都 理解 HTMLS 的 DOCTYPE， 因 此 你 可 以 坚持 在 所 


有 页 面 中 使 用 它 ， 意 掉 过 去 的 那些 DOCTYPE。 


(唯一 可 能 用 到 过 去 那些 DOCTYPE 的 情况 


是 继承 一 个 旧 站 ,而 网 站 的 拥有 者 不 允许 将 DOCTYPE 修改 为 HTMLS5 的 版 本 。 ) 
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3.2 创建 页 面 标题 


3.1 节 HTML 基础 代码 中 <title></ 
title> 仅 为 占 位 符 , 现在 开始 讨论 title 元 素 。 

每 个 HTML 页 面 都 必须 有 一 个 title 元 
素 。 每 个 页 面 的 标题 都 应 该 是 简短 的 、 描 述 
性 的 ， 而 且 是 唯一 的 ， 如 图 3.2.1 所 示 。 在 大 
多 数 浏 览 器 中 ， 页 面 标 题 出 现在 窗口 的 标题 
栏 (Chrome 是 个 例外 ) ， 如 图 3.2.2 所 示 。 
如 果 支 持 标 签 浏览 ( 所 有 近年 发 布 的 主流 浏 
览 器 都 支持 ) ， 页 面 标 题 也 会 出 现在 标签 上 。 
页 面 标题 还 会 出 现在 访问 者 浏览 历史 列表 和 
书签 里 ， 如 图 3.2.3 所 示 。 

或 许 更 为 重要 的 是 ， 页 面 标题 会 被 Google、 
Bing, Yahoo! 等 搜索 引擎 采用 ， 从 而 能 够 大 
致 了 解 页 面 内 容 ， 并 将 页 面 标题 作为 搜索 结 
果 中 的 链接 显示 ， 如 网 3.2.4 所 示 。 






































«IDOCTYPE html» 

«html lang-'en"» 

«head» 
«meta charset-"UTF-8" /» 
«title»Antoni Gaudí - Introduction 
— «/title» 

«/head» 

«body» 


«/body» 
</html> 











3.2.1 title 元 素 必 须 位 于 head 部 分 ， 将 它 放 
置 在 指定 字符 编码 的 meta 元 素 后 面 





Antoni Gaudí - Introduction - Mozilla Firefox 





File Edit view History Bookmarks Tools Help 





| (3 Antoni Gaudí - Introduction T 


y e Antoni Gaudi - Introduction x a 


3.2.2 ”在 大 多 数 浏览 器 (如 Firefox) 中 ， 页 面 
标题 既 显 示 在 标题 栏 ， 也 显示 在 标签 上 。 不 过 ， 
Chrome (下 图 ) 只 在 标签 上 显示 页 面 标题 
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| History Bookmarks Tools Help 
Show All History  Ctrl--Shift--H 





| ] Antoni Gaudí - Introduction 


Restore Previous Session 
Recently. Closed Tabs 
Recently Glased Windows 








3.2.3 页 面 标题 也 出 现在 访问 者 的 History 面板 
(如 图 ) 、 收 藏 夹 列 表 以 及 书签 列表 中 


总 之 ， 要 让 每 个 页 面 的 title 是 唯一 的 ， 
从 而 提升 搜索 引擎 结果 排名 ， 并 让 访问 者 获 
得 更 好 的 体验 。 
















































Web Images Groups News 


antoni gaudí cookwood 


Google 


Web Results 1 - 5 of about 18 for antoni gaudi 





Antoni Gaudi- Introduction 
Many tourists are drawn to Barcelona to see Antoni Gaudi's i 
Barcelona celebrates the 150th anniversary of Gaudi's birth in 
WwwW.cookwood.com/html5ed/examples/foundation/div. htl - 


图 3.2.4 或 者 最 重要 的 是 ， 页面 标题 通常 是 
Google 等 搜索 引擎 的 搜索 结果 中 链接 的 文字 ， 它 


也 是 判断 搜索 结果 中 页 面相 关 度 的 重要 因素 。 此 处 
为 Google 中 显示 的 页 面 标题 和 部 分 主体 内 容 





























创建 页 面 标题 的 步骤 

(1) 将 光标 放 在 文档 head 中 的 «title» 和 
«title» 之 间 。 

(2) 输入 网 页 的 标题 。 


title 元 素 是 必需 的 。 
title 中 不 能 包含 任何 格式 、HTML、 


图 像 或 指向 其 他 页 面 的 链接 。 


创建 新 页 面 时 ， 有 的 代码 编辑 器 会 预先 
为 页 面 标题 填 上 默认 文字 ， 除 非 已 经 按照 3.1 节 
中 介绍 的 方法 使 用 了 特定 的 开头 代码 。 要 注意 到 
这 些 默认 文字 ， 确 保 用 自己 的 标题 替换 它们 。 
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CES 如 有 果 页 面 标题 中 包含 特殊 字符 ( 如 重 
音 ) 或 某 些 符号 ， 那 么 它们 必须 是 页 面 所 用 编 
码 的 一 部 分 ( 如 果 使 用 UTF-8， 则 一 般 不 会 产 
生 问题 ) ， 否 则 就 必须 用 引用 来 编写 它们 CT 
用 的 字符 实体 引用 列表 参见 www.elizabethcastro. 
conyhtml/extras/entities.html ) 。 同 时 ， 别 忘 了 在 
保存 页 面 时 选择 恰当 的 编码 (如 UTF-8)， 从 
而 确保 特殊 字符 被 正确 地 保存 ( 参见 2.3 节 ) 。 


深入 探讨 页 面 标题 

很 多 开发 人 员 不 太 重 视 title 元 素 ， 甚 至 
那些 相当 用 心 、 很 有 经 验 的 开发 人 员 也 是 这 样 。 
他 们 只 是 简单 地 输入 网 站 名 称 ， 并 将 其 复制 到 
全 站 每 一 个 网 页 。 或 者 更 糟糕 ， 让 title 文 字 
仍然 保存 为 代码 编辑 器 默认 添加 的 文字 。 如 果 
流量 是 网 站 追求 的 指标 之 一 ， 这 样 做 对 建站 者 
和 潜在 的 访问 者 都 会 产生 巨大 的 损害 。 

不 同 搜索 引擎 确定 网 页 排名 和 内 容 索 引 
规则 的 算法 是 不 一 样 的 。 不 过 ，title 通常 都 
扮演 着 重要 的 角色 。 搜 索引 擎 会 将 title 作为 
判断 页 面 主 要 内 容 的 指标 ， 并 将 页 面 内 容 按 
照 与 之 相关 的 文字 进行 索引 。 有 效 的 title 应 
包含 几 个 与 页 面 内 容 密切 相关 的 关键 词 。 

作为 一 种 最 佳 实 践 ， 选 择 能 简要 概括 
文档 内 容 的 文字 作为 title 文字。 这些 文 
字 既 要 对 屏幕 阅读 器 用 户 友好 ， 又 要 有 利 
于 搜索 引擎 排名 。 其 次 ， 将 网 站 名 称 放 入 
title ( 这 不 是 必需 的 ) 。 将 网 站 名 称 放 在 
title 的 开头 是 很 常见 的 做 法 ， 不 过 将 页 面 
特有 的 文字 放 在 开头 是 更 好 的 做 法 。 

建议 将 title 的 核心 内 容 放 在 前 60 个 
Fil 含 空 格 ) 中， 因为 搜索 引擎 通常 将 
超过 此 数目 (作为 基准 ) 的 字符 截断 。 不 
同 浏览 器 显示 在 标题 栏 里 字符 数 的 上 限 不 
尽 相 同 ， 不 过 也 不 会 超过 60。 浏览 器 标签 
会 将 标题 截 得 更 短 , 因为 它 占 的 空间 较 少 。 


3.3 创建 分 级 标题 


HTML 提供 了 6 级 标题 用 于 创建 页 面 信息 
的 层级 关系 。 使 用 h1 ~ h6 元 素 对 标题 进行 标 
记 ， 其 中 hi 是 最 高 级 别 的 标题 ，h2 是 hi 的 子 
标题 ,nh3 是 h2 的 子 标题 ,以 此 类 推 ,你 将 了 解 到 ， 
标题 是 页 面 中 最 重要 的 HTML 元 素 类 别 之 一 。 

为 了 理解 hl ~ h6 标题 ， 可 以 将 它们 与 
销售 报告 、 学 期 论文 、 产 品 手册 和 新 闻 文 章 
等 非 HTML 文档 里 的 标题 进行 类 比 。 当 你 撰 
写 这 些 文稿 时 ， 会 根据 需要 为 内 容 的 每 个 主 
要 部 分 指定 一 个 标题 和 任意 数量 的 子 标题 ( 以 
及 子 子 标 题 ， 等 等 ) 。 总 之 ， 这 些 标 题 代 表 
了 文档 的 大 纲 。 网 页 的 分 级 标题 也 是 这 样 的 ， 
如 图 3.3.1 所 示 。3.4 节 会 对 此 作 进 一 步 分 析 。 






































«IDOCTYPE html» 

«html lang-"en"» 

«head» 
«meta charset-"UTF-8" /» 
«title»Antoni Gaudí - Introduction 

» </title> 
</head> 
<body> 


<h1>Antoni Gaudi</h1> 
<h2 lang="es">La Casa Milà</h2> 
«h2 lang="es">La Sagrada Família</h2> 


</body> 
</html> 











3.3.1 用 标题 建立 文档 结构 ， 就 像 大 纲 一 样 。 
这 里 ， 标 记 为 hz 的 LaCasa Milà 和 La Sagrada 
Família 是 标记 为 hi 的 顶级 标题 Antoni Gaudí 的 
子 标题 。( lang="es" 表示 这 段 内 容 为 西班牙 语 ， 
并 不 影响 文档 结构 。 ) 如 果 La Sagrada Familia 是 
h3 ， 它 就 成 了 La Casa Milà 的 子 标题 ( 也 是 Antoni 
Gaudi 的 子 子 标题 ) 。 标 题 之 间 的 空 行 并 不 是 必需 
的 ， 它 们 不 会 对 内 容 的 显示 产生 任何 影响 。 如 果 继 
续 编写 页 面 其 余部 分 的 代码 ， 相 关 的 内 容 ( 段落 、 
图 像 、 视 频 等 ) 就 要 紧 跟 在 对 应 的 标题 后 面 。 图 
3.3.2 是 分 级 标题 的 例子 
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本 HTML 结构 





- Introduction - Mozilla Firefox 













iistory. 
| Antoni Gaudí - Introduction Ik 





Antoni Gaudí 
La Casa Milà 


La Sagrada Família 


Default display of h1-h6 - Mozilla Fwefox “loj xi 


Ele Edt View History Bookmarks Tools Help | 


| |. | Default display of h1-h& * E 


This is a heading level one (n1) 








This is a heading level two (h2) 
This is a heading level three (n3) 

This is a heading level four (n4) 

This is a heading level five (h5) 


This is a heading level six (i5) 





3.3.2 ”所 有 的 标题 都 默认 以 粗 体 显示 ，hi 的 字 
号 比 hz 的 大 ,而 hz 的 又 比 ha 的 大 , 以 此 类 推 。 不 过 ， 
标题 的 外 观 并 不 是 由 其 层级 决定 的 ， 可 以 通过 CSS 
改变 它们 的 样式 














使 用 标题 对 网 页 进行 组 织 

(1) YE HTML 的 body 部 分 ， 输 入 <hn>， 
其 中 7 是 1 ~ 6 的 数字 ， 此 数字 取决 于 要 创 
建 的 标题 的 级 别 。h1 是 最 重要 的 标题 ， 而 h6 
则 是 最 不 重要 的 标题 。 

(2) 输入 标题 的 内 容 。 

(3) 输入 </hn>， 其 中 是 与 第 (1) 步 中 相 
同 的 数字 。 


由 于 hl ~ h6 标题 对 页 面 大 纲 的 定义 
有 重要 的 影响 ， 因 此 它们 非常 重要 。 通 常 ， 浏 
览 器 会 从 h1 到 h6 逐 级 减 小 标题 的 字号 。 不 过 
别 忘 了 要 依据 内 容 所 处 的 层次 关系 选择 标题 级 
数 ， 而 不 是 根据 你 希望 文字 应 该 显示 的 大 小 。 
这 样 做 能 让 页 面具 有 较 高 的 语义 化 程度 ， 提 升 
SEO 效果 和 可 访问 性 。 可 以 按照 你 希望 的 样子 
为 标题 添加 样式 ， 包 括 字 体 、 字 号 、 颜 色 等 。 
用 CSS 实现 这 些 样式 的 详细 说 明 参 见 第 10 E 











搜索 引擎 对 标题 赋予 很 高 的 权重 ， 尤 
其 是 hi (这 并 不 是 说 页 面 中 的 ha 越 多 越 好 ， 
搜索 引擎 并 不 会 被 愚弄 ) 。 同 时 ， 屏 幕 阅读 器 
用 户 通常 通过 键盘 按键 在 标题 间 移 动 ， 这 让 他 
们 可 以 快速 了 解 页 面 内 容 并 去 查看 最 感 兴趣 的 
内 容 , 而 不 用 把 整个 页 面 从 头 到 尾 听 完 。 总 之 ， 
要 拥有 一 个 符合 逻辑 的 标题 层级 结构 。 


在 全 站 使 用 一 致 的 标题 层级 以 提升 用 
6 国 国 如 果 要 创建 指向 某 个 标题 的 链接 ， 需 


要 在 标题 中 添加 id (参见 6.3 节 ) 。 


需要 说 明 的 是 ， 图 3.3.1 中 每 个 h2 中 
的 lang 属性 表示 相应 的 内 容 不 是 通过 «html 
lang-z"en"» 声明 的 默认 语言 ( 英文 ) ， 而 是 
另 一 种 语言 ( 西班牙 语 ， 由 代码 es 表示 ) 。 


3.4 理解 HTML5 的 文档 大 纲 


上 一 节 讲 了 构成 页 面 大 纲 的 标题 元 素 hi ~ 
h6。 这 一 节 将 进一步 讲解 一 些 HTML5 特有 的 
影响 文档 大 纲 的 元 素 。 

你 知道 ， 使 用 标题 元 素 可 以 为 每 个 HTML 
文档 定义 一 个 基本 的 大 纲 ， 就 像 目 录 一 样 。 现 
在 ， 大 纲 还 无 法 在 页 面 中 明确 地 显示 出 来 (也 
许 有 一 天 浏览 带 会 提供 显示 它 的 方法 ) ， 但 它 
提供 的 语义 对 搜索 引擎 和 屏幕 阅读 器 来 说 是 非 
党 有 意义 的 。 搜 索引 擎 和 屏幕 阅读 需 通 过 大 纲 
确定 页 面 的 结构 并 为 用 户 提供 相关 信息 。 

JE HTMLS 之 前 的 HTML 和 XHTML 中 ， 
hi ~ h6 是 创建 文档 大 纲 的 全 部 元 素 。HTML5 
则 提供 了 四 个 分 块 内 容 (sectioning content ) 
元 素 一 article, aside, nav 和 section。 这 
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些 元 素 将 文档 划分 为 不 同 的 区 块 ， 并 定义 了 
hi ~ h6 (以 及 header 和 footer ) 元 素 的 范围 。 

这 意味 着 每 个 分 块 元 素 都 有 它 自 己 的 
hi ~ h6 层次 结构 ， 与 这 门 语言 早期 的 版 本 相 
比 ， 这 是 一 项 重大 的 改进 。 同 时 ， 每 个 页 面 
都 可 以 有 一 个 以 上 的 h1， 而 且 HTML 规范 也 
推荐 这 样 做 (不 过 ， 下 面 我 很 快 将 要 讲 到 ， 
为 什么 应 该 限制 hi 的 数量 ) 。 

上 述 这 些 都 会 影响 大 纲 。 让 我 们 比较 一 下 
两 种 等 价 的 大 纲 ， 看 看 其 工作 原理 。 在 两 个 例 
子 中 , 不 妨 想象 每 个 标题 之 后 都 有 众多 段落 和 
其 他 内 容 。 

第 一 个 大 纲 只 用 了 标题 元 素 ， 它 是 完全 
有 效 的 HTML5， 那 些 拥有 HTML 和 XHTML 
经 验 的 人 应 该 对 它 非 常熟 悉 , 如 图 3.4.1 所 示 。 





























«body» 
«hi»Product User Guide«/hi» 
«h2»Setting it Up«/h2» 
«h2»Basic Features«/h2» 
«h3»Video Playback«/h3» 
«h2»Advanced Features«/h2» 

«/body» 

</html> 











文档 大 纲 版 本 1 


第 二 个 版 本 (如 图 3.4.2 所 示 ) 既 用 了 标 
题 元 素 ， 又 用 了 HTMLS 的 section 元 素 (f 
A— AREH section 元 素 ) 。 (注意 : 缩 进 
并 不 重要 ， 它 不 会 对 大 纲 产 生 影 响 ， 但 它 可 
以 让 元 素 的 包含 关系 显得 很 清晰 。 ) 

早先 ， 我 提 到 浏览 硕 还 无 法 将 大 纲 显示 
出 来 。 不 过 ， 可 以 使 用 Geoffrey Sneddon 的 
HTML 5 Outliner ( http://gsnedders.html5.org/ 
outliner/ ) 查看 大 纲 。 这 是 一 个 对 文档 大 纲 进行 可 
视 化 显示 的 简单 好 用 的 工具 。 用 该 工具 对 上 面 的 
版 本 1 和 版 本 2 生成 大 纲 ， 不 难 发 现 ， 尽 管 它们 
的 hi ~ h6 标题 层级 并 不 相同 , 但 大 纲 是 一 样 的 : 


3.4.1 





























1. Product User Guide 
1. Setting it Up 
2. Basic Features 
1. Video Playback 
3. Advanced Features 





<body> 
«hi»Product User Guide«/hi» 
«section» 
«hi»setting it Up</h1> 
«/section» 


«section» 
<h1>Basic Features«/h1» 
«section» «l-- 赃 套 的 ， 因 此 是 其 父 元 
素 的 子 区 块 --> 
<h1>Video Playback</h1> 
</section> 
</section> 


<section> 
<h1>Advanced Features</h1> 
</section> 
«/body» 








</html> 





3.4.2 文档 大 纲 版 本 2 (与 版 本 1 的 大 纲 相 同 ， 
但 是 有 含义 的 标记 更 多 ) 


可 以 看 到 ， 版 本 2 中 每 个 section 元 素 都 
变 成 离 它 最 近 的 hl ~ he 或 分 块 内 容 祖 先 ( 这 
此 例 中 ， 分 块 内 容 祖 先 仍 是 section 元 素 ) 
的 子 区 块 。 全 部 四 个 HTMLS 分 块 内 容 元 素 
(article, aside, nav 和 section ) 都 会 如 此 ， 
即使 将 它们 混合 到 一 起 。 

相 比 之 下 ， 如 果 版 本 2 没有 section 元 素 

(可 以 称 之 为 版 本 3， 如 图 3.4.3 所 示 ) ， 那 

么 大 纲 会 很 不 一 样 。 

这 时 每 个 标题 的 重要 性 都 是 一 样 的 (hd ) , 
意 即 没有 任何 子 标题 ( 或 子 子 标题 ) : 


1. Product User Guide 
2. Setting it Up 
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3. Basic Features 
4. Video Playback 
5. Advanced Features 





«body» 
«hi»Product User Guide«/hi» 
«hi»Setting it Up</h1> 
«hi1»Basic Features«/hi» 
«hi»Video Playback</h1> 
«hi1»Advanced Features«/hi1» 

«/body» 

«html» 








3.4.8 文档 大 纲 版 本 3 ( 与 版 本 1 和 版 本 2 的 


大 纲 并 不 相同 ) 


拥有 相同 含义 的 大 纲 ( 即 版 本 1 和 版 本 
2 ) ， 尽 管 都 是 有 效 的 ， 但 版 本 2 更 为 可 取 ， 
因为 section 元 素 的 语义 更 为 明确 。 实 践 中 ， 
可 以 用 一 个 article 元 素 将 版 本 2 的 全 部 内 容 
包 起 来 ， 在 这 种 情形 下 ， 加 上 article 更 为 
合理 (尽管 所 生成 的 大 纲 会 略 有 不 同 - K 
3.4.4 展示 了 一 个 例子 。 








别 忘 了 ， 每 个 标题 之 后 应 该 紧 跟 着 相关 
的 文本 、 图 像 和 其 他 内 容 ( 即将 在 后 面 了 解 
到 ) 。 不 过 现在 这 些 内 容 都 没有 加 进来 ， 让 
你 可 以 专注 于 标题 和 大 纲 。 


1. 迎合 当前 生态 系统 

但 是 ， 等 等 ! 还 要 对 代码 做 一 项 调整 。 还 
记得 我 说 过 “下 面 我 很 快 将 要 讲 到 ， 为 什么 应 
该 限制 hi 的 数量 ” 吗 ? 尽管 每 个 分 块 内 容 元 
素 (article, aside, nav 和 section) 都 可 以 
从 hi 开始 其 标题 层级 , 但 这 并 不 是 强制 性 的 。 
实际 上 ， 在 可 预见 的 将 来 ， 如 果 分 块 内 容 元 素 
代表 的 是 已 经 存在 的 hi 的 子 标题 ， 则 最 好 使 
用 h2 或 更 低级 别 的 标题 开始 每 个 区 块 。 

下 面 是 这 样 做 的 原因 。 

在 不 断 演 进 的 万 维 网 世界 ， 有 大 量变 化 
的 部 分 。 像 HTMLS 这 样 的 新 规范 在 最 终 确定 
(需要 过 一 些 年 ， 目 前 HTMLS 还 没有 最 终 确 
定 ) 之 前 , 每 天 都 在 变化 。 新 的 浏览 器 发 布 了 ， 
新 版 本 的 屏幕 阅读 器 和 其 他 辅助 技术 推出 了 ， 
但 它们 的 步调 并 不 会 完全 同步 。 



































«body» 
«article» 
«hi»Product User Guide«/hi» 
«section» 
«hi»setting it Up</h1> 
«/section» 


«section» 
«hi»Basic Features«/h1» 
«section» 
«ht»Video Playback</h1> 
«/section» 
«/section» 


«section» 
«hi»Advanced Features«/hi1» 
«/section» 
«/article» 
«/body» 
«html» 














3.4.4 具有 明确 语义 的 大 纲 





相反 ,每 个 浏览 需 都 会 逐步 添加 功能 (这 
多 半 是 好 事 ) ， 但 不 一 定 是 与 其 竞争 对 手相 
同 的 功能 ( 这 不 太 好 ) ， 而 且 肯 定 不 会 是 与 
其 竞争 对 手 同步 的 时 间 表 。 屏 幕 阅读 器 也 是 
同样 的 情况 。 因 此 ， 尽 管 现代 浏览 器 都 支持 
大 量 HIMLS 特性 ， 在 本 书写 作 时 没有 一 个 浏 
JA ardet HTML5 大 纲 呈 现 给 屏幕 阅读 器 ， 而 
屏幕 阅读 器 也 无 法 将 其 呈现 给 用 户 。 
简 而 言 之 ， 这 意味 着 屏幕 阅读 器 和 其 他 
辅助 技术 还 无 法 区 分 直接 放 在 body 里 的 hi 和 
E Æ article, aside, nav 和 section Œ [fj 
的 hi。 在 它们 看 米 ， 这 些 hi 都 是 顶层 的 hi. 
Opera 布道 者 Bruce Lawson 是 我 知道 的 第 一 个 
指出 这 一 点 的 人 Cwww.brucelawson.co.uk/2009/ 
headings-in-html-5-and-accessibility/; 注意 这 个 
URL 中 的 其 他 一 些 信息 已 经 过 时 了 ， 因 为 从 那 
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时 起 规范 已 经 发 生 了 变化 。 男 参见 他 与 Remy 
Sharp 的 新 著 Introducing HTML5 ) 。 

然而 ， 屏 幕 阅读 器 用 户 却 没 有 时 间 等 符 
万 维 网 跟 上 他 们 的 需求 。 它 们 将 继续 利用 标 
题 来 获取 页 面 内 容 概览 ， 对 页 面 进 行 导航 。 
而 有 含义 的 标题 层级 关系 将 让 这 变 得 更 为 容 
易 ， 使 访问 者 拥有 更 好 的 体验 。 

因此 ， 在 生态 系统 赶 上 来 之 前 ， 使 用 
hi ~ h6 明确 地 表现 层次 关系 ， 就 像 没 有 分 块 
内 容 元 素 一 样 , 会 让 你 和 你 的 用 户 感觉 更 好 。 
Lawson 等 人 推荐 这 种 方法 ,我 也 是 。 

下 面 看 看 应 该 怎样 做 ,参见 图 3.4.5。 

















<body> 
«article» 
«hi»Product User Guide«/hi1» 
«section» 
«h2»Setting it Up«/h2» 
«/section» 


«section» 
«h2»Basic Features«/h2» 
«section» 
«h3»Video Playback«/h3» 
«/section» 
«/section» 


«section» 
«h2»Advanced Features«/h2» 
«/section» 
«article» 
«/body» 
</html> 











3.4.5 版 本 4( 所 有 4 个 版 本 的 推荐 方法 ) 





HTML5 大 纲 算法 对 聚合 内 容 的 好 处 


原先 处 于 section 元 素 第 一 层 的 hi 现在 
是 h2。 标 题 Video Playback 所 在 的 section ipo 
在 男 一 个 section 里 面 ， 它 原先 是 hi1， 现 在 是 
h3。 文档 大 纲 并 未 改变 , 只 是 标题 层级 改变 了 。 

这 个 例子 中 只 有 hi ~ h3 ,不 过 ,如 果 需 要 ， 
也 可 以 使 用 h4 ~ h6。 例 如 ，Video Playback 
的 子 标题 应 该 是 一 个 h4 ( 视 情 况 可 加 上 一 个 
分 块 父 元 素 ) ， 以 此 类 推 。 

记 住 ， 这 种 推荐 做 法 对 所 有 的 分 块 内 容 
元 素 (article、aside、nav 和 section ) 都 管用 ， 
而 不 仅仅 是 例子 中 出 现 的 分 块 内 容 元 素 。 


2. 小结 

如 果 还 没有 完全 掌握 HTMLS 的 文档 大 纲 ， 
建议 你 重读 一 遍 关 于 它 的 讨论 。 看 起 来 容易 ， 
做 起 来 难 。 强 烈 建 议 你 创建 多 种 测试 页 面 ， 比 
较 它 们 在 HTMLS Outliner 中 的 结果 ， 从 而 更 
好 地 理解 大 纲 算法 的 原理 。 在 做 实际 项 目 时 ， 
也 应 使 用 Outliner， 确 保 页 面 结构 是 符合 预期 
的 。 首 先 ， 确 保 对 HTMLS 页 面 进行 验证 ， 消 
除 编码 错误 ( 参见 20.5 节 ，http:/validatornu/ 
与 http:/validatorw3.org/ 两 个 网 址 均 可 ) 。 



































不 要 留 下 这 样 一 种 印象 ， 即 必须 使 用 
一 个 article, 或 者 section 必须 (也 只 能 ) 

误 套 在 一 个 article 里 面 。 我 们 讨论 的 例子 只 
是 使 用 这 些 元 素 的 一 种 方式 ， 而 事实 上 ， 
样 的 内 容 也 可 以 用 其 他 的 方式 进行 标记 ， 它 
们 仍然 是 有 效 的 HIML5。 稍 后 我 们 会 详细 讲 
ff article 和 section， 根 据 内 容 的 不 同 ， 它 
们 有 一 些 不 同 的 应 用 场景 。 


Aj 


目前 你 已 看 到 ， 作 为 分 块 内 容 元 素 ， 根 据 HIML5 的 大 纲 算法 ， 每 个 article, aside, 
nav 和 section 都 有 其 自身 的 大 纲 ， 该 大 纲 可 以 从 hi 开始 ， 一 直到 h6。 

除了 给 文档 标题 增加 了 灵活 性 ， 这 还 有 另外 一 个 不 那么 明显 的 好 处 : 当 内 容 出 现在 其 他 
页 面 甚 至 其 他 网 站 时 ， 不 会 破坏 父 文 档 的 大 纲 ， 其 自身 的 大 纲 也 完好 无 损 。 





36 $33 基本 HTML 结构 





如 今 ， 在 网 站 之 间 共 享 内 容 已 变 得 越 来 越 普遍 了 。 这 样 的 例子 包括 新 闻 聚 合 网 站 、 带 
RSS 源 的 博客 、Twitter 源 ， 等 等 。 你 即将 在 3.9 节 中 了 解 到 ，article 元 素 代表 一 个 独立 的 容 
器 ， 它 可 以 被 聚合 ( 并非 必需 ， 只 在 恰当 的 时 候 可 以 这 样 做 ) 。 

想象 下 面 的 article 显示 在 另 一 个 网 站 的 情形 : 


«h2»News from around the Web«/h2» 


«article» 
«hi»Local Teen Prefers Vinyl over Digital«/hi» 


<p>A local teen has replaced all her digital tracks with vinyl. “It’s 
,groovy," she said, on the record.«/p» 


«h2»Hooked after First Album«/h2» 


«/article» 


将 代码 放 入 HTMLS Outliner ， 将 会 看 到 其 大 纲 为 : 


1. News from around the Web 
1. Local Teen Prefers Vinyl over Digital 
1. Hooked after First Album 
因此 ， 即 使 Local Teen 标题 比 它 上 面 的 h2 的 层级 更 高 (h1) ， 它 仍然 是 h2 的 子 标 题 ， 因 
为 它 包 含 在 h2 下 面 的 article 中 。 而 Hooked h2 则 是 News h2 的 子 子 标题 ， 不 是 在 平等 的 层级 。 
将 News 标题 改 为 h3、h4 或 任何 层级 ， 大 纲 都 会 保持 不 变 。Local Teen 和 Hooked 也 是 一 
样 ， 只 要 保持 Local Teen 的 标题 层级 比 Hooked 的 高 。 




















3.5 ”对 分 级 标题 进行 分 组 不 过 ,需要 指出 ，hgroup 中 的 所 有 标题 都 会 
有 时 ， 一 个 标题 有 多 个 连续 的 层级 ， 例 在 浏览 器 中 显示 ， 如 图 3.5.2 所 示 。 
如 带 有 子 标题 、 替 换 标 题 或 广告 语 。 这 时 将 对 两 个 或 更 多 标题 进行 分 组 的 步骤 
它们 放 进 hgroup 元 素 可 以 指明 它们 是 相关 的 ， (1) 输入 <hgroup>。 
如 图 3.5.1 所 示 。 每 个 hgroup 都 包含 两 个 或 更 (2) 输入 <hn>， 其 中 是 1 ~ 6 的 数字 ， 
多 的 ht ~ h6 标题 ， 不 可 放 入 其 他 元 素 。 此 数字 取决 于 要 创建 的 标题 的 级 别 。 
在 一 个 hgroup 中 ， 只 有 第 一 个 最 高 级 别 (3) 输入 标题 的 内 容 。 
的 标题 会 出 现在 文档 大 纲 中 (参见 3.4 节 ) ， (4) 输入 «/hn», Hp n 是 与 第 (2) 步 中 相 





这 也 是 你 选择 使 用 hgroup 的 一 个 决定 因素 。 同 的 数字 。 
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(5) 重复 (2) ~ (4) 步 ， 创 建 所 有 需 成 为 
hgroup 一 部 分 的 标题 。 通 常 ， 每 一 个 后 续 标 
题 的 级 别 都 应 低 一 级 ( 例如， 从 hi 到 hz， 依 
次 类 推 ) 。 

(6) 输入 </hgroup>。 





<body> 


«article» 
«hgroup» 
«hi»Giraffe Escapes from Zoo«/hi» 
«h2»Animals Worldwide Rejoice«/h2» 
«/hgroup» 


«p... [文章 内 容 ] .../p» 
</article> 


</body> 
</html> 














3.5.4 两 个 相关 的 标题 组 合 在 一 起 。 在 此 例 中 ， 
h2 是 文章 标题 hi 的 子 标题 。 由 于 Giraffe Escapes 
from Zoo 被 标记 为 最 高 级 别 的 标题 ， 因 此 只 有 它 出 
现在 文档 大 纲 里 ， 不 过 这 两 个 标题 都 会 出 现在 浏览 
器 中 ， 如 图 3.5.2 所 示 。 类 似 地 ， 如 果 在 这 个 hi 后 
面 再 加 一 个 hi， 新 的 hi 也 不 会 出 现在 大 纲 里 ， 就 
像 上 面 的 h2 一 样 。 由 于 h2 并 不 出 现在 大 纲 里 ， 文 
章 中 的 下 一 个 标题 可 以 是 hz ( 而 不 是 na ) fH 
我 们 可 以 将 其 看 做 h1“Giraffe Escapes from Zoo" 
的 直接 子 标题 

































































"! hgroup example - Mozilla Firefox ln xl 
File Edt view History Bookmarks Tools Help 


Ml. = 


Giraffe Escapes from Zoo 





E hgroup example 





Animals Worldwide Rejoice 








图 3.5.2 ”两 个 标题 都 会 显示 在 浏览 器 中 ， 
们 没 被 包含 在 hgroup 元 素 中 一 样 


就 像 它 








hgroup 不 能 仅 包含 一 
包含 两 个 。 


如 上 所 述 ， 在 一 个 hgroup 中 ， 只 有 
第 一 Lus ded 出 现在 文档 大 纲 
中 ， 标 题 的 顺序 没有 影响 。 因 此 ， 如 果 一 个 
hgroup 有 一 个 h3， 后 面 紧 跟 一 个 h2， 那 么 h2 
会 出 现在 大 纲 中 。 我 们 通常 根据 优先 级 对 标 
题 进 行 排序 ， 因 此 低级 别 的 标题 (如 ha ) 不 
会 出 现在 级 别 高 的 标题 (如 h2 ) 前 面 ; 偶尔 
可 能 遇 到 例外 的 情况 。 


3.6 普通 页 面 构成 


你 肯定 已 经 访问 过 了 大 量 像 图 3.6.1 中 显 
示 的 那 种 网 站 。 抛 开 内 容 不 谈 ， 我们 可 以 看 
到 该 页 面 有 四 个 主要 组 件 : 带 导 航 的 页 头 、 
显示 在 主体 内 容 区 域 的 文章 、 显 示 次 要 信息 
的 侧 栏 以 及 页 脚 ， 如 图 3.6.2 所 示 。 

现在 ， 在 没有 引入 CSS 的 情况 下 ， 你 还 
无 法 像 图 3.6.1 中 那样 为 页 面 添加 样式 ， 无 法 
对 页 面 进行 排 布 ， 如 图 3.6.1 和 图 3.6.2 所 示 。 
你 将 从 第 7 章 开 始 学 习 CSS， 从 第 10 章 开始 
学 习 如 何 对 文字 进行 格式 化 ， 如 何 添 加 颜色 
等 ， 在 第 ro oono 

不 过 ， 应 用 到 这 些 常 规 页 面 结 构 的 语 
义 都 是 非常 相似 的 ， 本 章 剩 
余 章 节 的 大 部 分 内 容 都 会 讲解 这 些 结构 。 
按照 从 页 面 顶端 向 下 的 顺序 ， 将 依次 讲解 用 
header, nav, article, section, aside 和 
footer 定义 页 面 的 结构 ， 以 及 用 以 添加 额外 
样式 信息 或 实现 其 他 目的 的 通用 容器 div。 除 
了 div 以外， 这 些 元 素 都 是 HTMLS5 推出 后 才 
有 的 。 在 前 面 的 代码 示例 和 讨论 中 ， 你 已 经 
见 到 了 其 中 的 一 些 元 素 。 
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在 学 习 这 些 元 素 的 过 程 中 ， 不 要 关心 它们 
在 示例 布局 中 的 位 置 , 而 应 该 关注 它们 的 语义 。 

接 下 来 ， 我 们 还 会 提前 看 到 其 他 一 些 元 
素 ， 如 岂 (无 序列 表 ) 和 a (链接 ) 。 这 些 
将 在 后 续 曹 节 讲 到 。 





BARCELONA'S ARCHITECT 
's incredible buildings bring millions of tourists tn Darcelona each year. 
Architectural Wonders. 
nformity, already visible ín his teenage years, coupled with hio quiet 
po ofBarcelon. 


LA SAGRADA FAMILIA 


The complicatedly named and curiously unfinished masterpiece that is 
出 


hed state, of which the everpresent scaffolding and cranes are 


BENI eere Ge atrays reine me of toward Roark in Ayn Rand's 
ill 7 rotatuaa. Cars projet in the Park Cual! was to build a 
ee would love where they 
hved. It was never hrushed. 


since riowr we all get to enjoy it The Park Guall is eet on 


ignes and locals alike every day of the week. It 
he city iss. 








图 3.6.1 一 个 普通 的 布局 ， 顶 部 是 主导 航 ， 左 侧 
是 主要 内 容 ， 右 侧 是 侧 栏 ， 底 部 是 页 脚 。 要 让 页 面 
成 为 这 个 样子 ， 需 要 添加 CSS 








Masthead/header with navigation 


Related, but 
tangential 
information 


Main page content 








Footer 








图 3.6.2 页 面 的 常规 信息 类 型 。 这 只 是 一 种 安排 
方式 ， 不 过 是 很 常见 的 一 种 
3.7 创建 页 收 


如 果 页 面 中 有 一 块 包含 一 组 介绍 性 或 导航 
性 内 容 的 区 域 , 应 该 用 header 元 素 对 其 进行 标记 。 





一 个 页 面 可 以 有 任意 数量 的 header 元 
素 ， 它 们 的 含义 可 以 根据 其 上 下 文 而 有 所 不 
同 。 例 如 ， 处 于 页 面 顶 端 或 接近 这 个 位 置 的 
header 可 能 代表 整个 页 面 的 页 眉 ( 有 时 称 做 
页 头 , ， 如 图 3.7.1 所 示 。 通 常 ， 页 眉 包 括 网 
站 标志 、 主 导航 (如 图 3.7.2 所 示 ) 和 其 他 全 
站 链接 ， 甚 至 搜索 框 。 这 无 疑 是 header 元 素 
最 常见 的 使 用 形式 ， 不 过 不 要 误 认 为 是 唯一 
的 形式 。 

















«body» 
«header» 
«nav» 
<ul> 
<li><a href="#gaudi">Barcelona's 
— Architect</a></li> 
<li lang-'es"»«a href="#sagrada- 
— familia">La Sagrada Família</a> 
=» «li» 
<li><a href="#park-guell">Park 
— Guell</a></1i> 
</ul> 
</nav> 
</header> 
</body> 
</html> 
3.7.1 这 个 header 代表 整个 页 面 的 页 眉 。 它 包 


含 一 组 代表 整个 页 面 主 导航 的 链接 ( 在 nav 元 素 
中 ) 。 出 于 提高 可 访问 性 的 目的 ， 可 以 将 可 选 的 
role-"banner" 应 用 到 整 页 页 眉 。 图 3.7.3 中 显示 了 
这 样 做 的 例子 








Antoni Gaudí, Barcelona's architect - Mozilla Firefak 二 | 口 | x 
File Edt view History Bookmarks Tools Help 
| |] Antoni Gaudi, Barcelona's architect [+ x 








© Barcelona's Architect 
* La Sagrada Familia 





* Park Guell 





3.7.2 包含 导航 的 页 丑 


header 也 很 适合 对 页 面 深 处 的 一 组 介绍 
性 或 导航 性 内 容 进 行 标记 。 例 如 ， 一 个 区 块 
的 目录 ， 如 图 3.7.3 所 示 。 








«body» 

«header role-"banner"» 
e. [网 站 标识 、 导 航 等 ] ... 

«/header» 


«article» 
«header» 
«hi»Frequently Asked Questions«/hi» 
«nav» 
«ul» 
<li><a href-"tansweri"»What is your return policy?</a><li> 
<li><a href-"itanswer2"»How do I find a location?</a><li> 





</ul> 
</nav> 
</header> 


«I-- header 的 链接 指向 这 里 --> 

«article id-'answer1"» 
«h2»What is your return policy^/h2» 
«p ..。 [答案 ] e </p> 

«article» 


«article id-'answer2"» 
«h2»How do I find a location?«/h2» 
«qp». [答案] e. </p> 

«article» 


«article» <!-- 结 束 父 元 素 article --> 


«/body» 
</html> 




















3.7.3 这 个 页 面 有 两 个 header， 一 个 是 整个 页 面 的 ， 另 一 个 是 Frequently Asked Questions 父 元 素 
article 的 。 注 意 第 一 个 并 不 包含 任何 hi ~ h6 标题 ， 而 第 二 个 则 有 。 关 于 第 一 个 header 中 出 现 的 可 选 的 
role 属性 ， 参 见 本 市 最 后 一 条 提示 



































header 元 素 是 3.4 节 中 提 到 的 四 个 分 块 创建 页 眉 的 步骤 
内 容 元 素 中 的 一 个 。 这 意味 着 在 考虑 文档 大 (1) 将 光标 放置 在 需要 创建 页 眉 的 元 素 里 。 
纲 时 ， 位 于 header 内 的 任何 hi ~ he 标题 都 (2) 输入 <header>。 
会 被 认为 处 于 header 的 范围 中 ， 而 不 是 整个 (3) 输入 页 眉 内 容 , 包括 各 种 类 型 的 内 容 ， 











页 面 。 因 此 ，header 通常 包含 其 自身 的 标题 。 它们 分 别 由 各 自 的 HTML 元 素 ( 大 多 数 将 在 本 

(hi ~ h6 或 hgroup ) , 但 这 并 不 是 强制 性 的 。 书 余下 部 分 讲 到 ) 进行 标记 。 例 如 ，header 可 
例 如 ， 3.7.3 中 有 标题 ， 但 图 3.7.1 中 就 ”以 包含 hi ~ h6 标 题 、 标志、 导航 、 搜 索 框 , 等 等 。 
没有 。 (4) 输入 «/header», 
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只 在 必要 时 使 用 header。 大 多 数 情 况 " 
下 ， 如 果 只 有 ha ~ h6 或 hgroup， 没 有 其 他 pem 
需要 与 之 组 合 在 一 起 的 伴生 内 容 ， 就 没有 必 «nav role-"navigation"» 
将 心身 起 来 «ul» 
要 用 header 将 它 包 起 来 。 <li><a href-"itgaudi'"»Barcelona's 
— Architect«/a»«/li» 

— " " z <li lang-'es"»«a href="#sagrada- 
header 与 hl — h6 元 素 中 的 标题 ( 参 » familia">La Sagrada Família«/a» 
见 3.3 P) 是 不 能 互 换 的 。 它 们 都 有 各 自 的 语 E NM 
: <li><a href-"itpark-guell'»Par 
义 目的 。 — Guell«da»«/li» 

</ul> 

- gi " 7 </nav> 
ED 不 能 在 header € 3& & footer 元 素 或 «/header» 

另 一 个 header， 也 不 能 在 footer 或 address i 
m 


UK ERA header, 


header 不 一 定 要 像 示例 那样 包含 一 
个 nav 元 素 ( 如 图 3.7.1 和 图 3.7.3 所 示 ) ， 
不 过 在 大 多 数 情况 下 ， 如 果 header 包含 导航 
性 链接 ， 就 可 以 用 nav。 在 图 3.7.3 中 ，nav 包 
住 Frequently Asked Questions 链接 列表 是 恰当 
的 ， 因 为 它 是 页 面 内 的 主要 导航 组 (将 在 3.8 
TRAGE). 


要 了 解 header 如 何 取代 HTMLS 之 前 
版 本 中 div 元 素 的 一 个 功能 ， 参 见 3.13 节 。 


要 了 解 如 何在 header 中 使 用 Tole= 
"banner"， 参见 3.14 节 。 


3.8 标记 导航 


HTML 的 早期 版 本 没有 元 素 明 确 表示 主 
导航 链接 的 区 域 ， 而 HTMLS 则 有 这 样 一 个 元 
素 ， 即 nav, nav 中 的 链接 可 以 指向 页 面 中 的 
内 容 ， 如 图 3.8.1 所 示 ， 也 可 以 指向 其 他 页 面 
或 资源 , 或 者 两 者 兼 而 有 之 。 无 论 是 哪 种 情况 ， 
应 该 仅 对 文档 中 重要 的 链接 群 使 用 nav。 




















3.8.1 这 些 链 接 (a 元 素 ) 代 表 一 组 重要 的 导航 ， 
因此 将 它们 放 入 一 个 nav 元 素 。 通 常用 一 个 山 元 
素 (无 序列 表 ) 对 链接 列表 进行 标记 ， 除 非 链 接 是 
面包 履 链 接 。 如 果 是 面包 恬 ， 则 使 用 一 个 ol 元 素 
(有 序列 表 ) 。 更 多 有 关 列 表 的 信息 参见 第 15 章 。 
role 属 性 并 不 是 必需 的 ,不 过 它 可 以 提高 可 访问 性 。 
更 多 有 关 疝 nav 应 用 role="navigation" 的 信息 参 
见 本 节 最 后 一 个 提示 


如 果 你 仔细 看 过 上 一 节 的 代码 ， 就 已 经 
见识 过 nav 元 素 了 。 下 面 将 那 一 段 代码 搬 过 来 ， 
并 对 nav 进行 了 突出 显示 ( 参见 图 3.8.1 ) 。 
nav 元 素 不 会 对 其 内 容 添加 任何 默认 样式 ， 如 
3.8.2 所 示 。 
























































Antoni Gaudí, Barcelona's architect - Mozilla Firefak 


Ele Edt Wew History Bookmarks Tools Help 


[s , 





|| Antoni Gaudí, Barcelona's architect 





* Barcelona's Architect 
* La Sagrada Familia 








在 默认 情况 下 ， 我 们 的 导航 看 起 来 相当 
普通 。 那 些 圆 点 并 不 是 由 nav 元 素 产 生 的 。 除 了 开 
启 一 个 新 行 以 外 ， 该 元 素 没 有 任何 默认 样式 。 显 示 
这 些 圆 点 是 因为 每 个 链接 都 包 在 一 个 1 元 素 ( 列 
表 项 ) 里 面 。 使 用 CSS 可 以 隐藏 这 些 圆 点 或 显示 
其 他 的 东西 ， 还 可 以 将 这 些 链接 水 平 显示 ， 改 变 它 
门 的 颜色 ， 让 它们 看 起 来 像 按钮 ， 等 等 。 本 书 将 从 
第 7 章 开 始 讲解 CSS 


3.8.2 
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将 一 组 链接 指定 为 重要 导航 

(1) 输入 <nav>。 

(2) 输入 一 组 链接 并 将 其 标记 为 ul (无 序 
列表 ) 结构 ， 除 非 链接 的 顺序 比较 重要 ( 例 
如 面包 居 链 接 ) 。 如 果 链 接 顺 序 重要 ， 就 将 
其 标记 为 ol ( 有 序列 表 ) 结构 。 ( 要 了 解 链 
接 和 列表 ， 分 别 参见 第 6 章 和 第 15 章 。 ) 

(3) 输入 </nav>。 


有 编写 HTML 或 XHTML 经 历 的 开 
发 人 员 或 许 已 经 习惯 了 使 用 Ul 或 01 元 素 对 
链接 进行 结构 化 。 在 HTMLS F, nav 并 没有 
取代 这 种 最 佳 实践 。 应 该 继续 使 用 这 些 元 素 ， 
只 是 在 它们 的 外 围 简单 地 包 上 一 个 nav (参见 
图 3.8.1) 。 


尽管 屏幕 阅读 器 整体 上 还 在 追赶 
HTMLS 新 出 现 的 语义 功能 ， 但 nav 能 帮助 它 
们 识别 页 面 的 主导 航 ， 并 允许 用 户 通过 键盘 
直接 跳 至 这 些 链接 。 这 可 以 提高 页 面 的 可 访 
问 性 ， 提 升 访问 者 的 体验 。 


深入 了 解 nav 


HTML5 规范 不 推荐 对 辅助 性 的 页 脚 
链接 ( 如 “使 用 条 款 ”、“ 隐 私 政策 ”等 ) 
使 用 nav， 这 不 难 理解 。 不 过 ， 有 时 页 和 脚 会 
再 次 显示 顶级 全 局 导航 ,或 者 包含 “商店 位 
I”, “RBE” FERA EKZ% 
情况 下 ， 我 们 推荐 将 页 脚 中 的 此 类 链接 放 入 
nav 中 。 


HTMLS 不 允许 将 nav 3X & 4& address 
元 素 中 。 


有 要 了 解 如 何在 nav 中 使 用 role="nav- 


igation" (参见 图 3.8.1 ) ， 请 参见 3.14 节 。 


上 文 提 到 ， 要 在 页 面 中 插入 一 组 链接 并 不 意味 着 一 定 要 将 它们 包含 在 nav 中 。 
下 面 的 示例 新 闻 页 面包 含 四 个 链接 列表 ， 其 中 只 有 两 个 列表 具有 足够 的 重要 性 ， 可 以 包 在 nav 中 。 


(可 以 看 到 ， 一 些 代 码 片 段 被 缩减 了 。 ) 


«body» 


«header» 
《1-- 站 点 标识 可 以 放 在 这 里 --> 
<!-- 全 站 导航 --> 
«nav» 
«ul» ... «/ul» 
«/nav» 
«/header» 


«div id-"main"» 
«hi»Arts &amp; Entertainment«/hi» 
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«article» 


«hi»Gallery Opening Features the Inspired, Inspiring«/hi» 


«p... [故事 内 容 ] ... </p> 


«aside» 
«hi»Other Stories«/hi» 


«1-- 不 包 在 nav 中 --> 
«ul» ... [故事 链接 ] ..， 
«/aside» 
«article» 
«/div» 
«aside id-"sidebar"» 
«nav»«l-- 次 级 导航 --> 
«ul» 


«/ul» 


<li><a href-"/arts/movies/"»Movies«/a»«/li» 
<li><a href-'/arts/music/"»Music«/a»«/li» 


«/ul» 
«/nav» 
«/aside» 


«footer» 
<!-- 辅助 性 链接 并 未 包 在 nav 中 -- 
«ul» ... «/ul» 
«/footer» 
«/body» 
«/html» 


位 于 aside (参见 3.11 45 ) 中 的 次 级 导航 允许 用 户 跳 转 到 Arts & Entertainment 目录 中 的 
其 他 页 面 ， 因 此 它 构 成 了 页 面 的 一 个 主要 导航 区 块 。 不 过 ，Other Stories 这 个 aside 则 不 是 。 

那么 , 如 何 判 断 是 否 对 一 组 链接 使 用 nav 呢 ? 归根 结 底 , 这 取决 于 内 容 的 组 织 情 况 。 至 少 ， 
应 该 将 网 站 全 局 导航 ( 让 用 户 可 以 跳 至 网 站 各 个 主要 部 分 的 导航 ) 标 记 为 nav。 这 种 nav 通 常 (但 
并 不 总 是 ) 出 现在 页 面 级 的 header TREM (参见 3.7 节 ) 。 











3.9 创建 文章 


HTMLS 的 另 一 个 新 元 素 便 是 article, 
参见 图 3.9.1。 你 已 经 见 过 一 些 用 到 该 元 素 的 
示例 。 现在， 让 我 们 深入 了 人 解 一 下 它 的 作用 。 

根据 其 名 称 ， 你 大 概 会 猜想 article 用 于 
包含 像 报 纸 文章 一 样 的 内 容 。 不 过 ，article 
并 不 局 限于 此 。 在 HIML5 中 ,“ 文 章 ”( article ) 
更 接近 于 “项 目 ” (item ) 。 

HTMLS 对 该 元 素 的 定义 如 下 。 
































article 元 素 表 示 文 档 、 页 面 、 应 用 或 网 
站 中 一 个 独立 的 容器 ， 原 则 上 是 可 独立 分 配 
或 可 再 用 的 , 即 聚 合 。 它 可 以 是 一 篇 论坛 帖子 ， 
一 篇 杂志 或 报纸 文章 ， 一 篇 博客 文章 ， 一 则 
用 户 提 交 的 评论 ， 一 个 交互 式 的 小 部 件 或 小 
工具 ， 或 者 任何 其 他 独立 的 内 容 项 。 

其 他 article 的 例子 包括 电影 或 音乐 评论 、 
案例 研究 、 产 品 描述 ， 等 等 。 你 或 许 惊讶 于 它 
还 可 以 是 交互 式 的 小 部 件 或 小 工具 ， 不 过 这 些 
确实 是 独立 的 、 可 再 分 配 的 内 容 项 。 





























«body» 
«header» 

«nav role-"navigation"» 

.… [包含 链接 的 Ul] ... 

«nav» 
«/header» 
«article» 

«hi id-"gaudi"»Barcelona's Architect«/h1» 


«p»Antoni Gaudí's incredible buildings 
— bring millions of tourists to 
— Barcelona each year.«/p» 


«p»Gaudí's non-conformity, already 

— visible in his teenage years, coupled 
— with his quiet but firm devotion to 
— the church, made a unique foundation 
— for his thoughts and ideas. His 

— search for simplicity, based on his 

— careful observations of nature, are 
— quite apparent in his work, from the 
— «a href-"ftpark-guell'»Park Guell«/a» 
— and its incredible sculptures and 

— mosaics, to the Church of the «a href- 
— "itsagrada-familia"»Sacred Family«/a» 
— and its organic, bulbous towers.«/p» 


«h2 id-"sagrada-familia" lang-'es"»La 
— Sagrada Família«/h2» 


es [图像 和 段落 ] ... 


<h2 id-"park-guell'»Park Guell«/h2» 








.… [图 像 和 段落 ] ... 
«/article» 
</body> 
</html> 
图 3.9.1 为 了 精简 ， 我 对 文章 内 容 进 行 了 缩写 ， 





略 去 了 与 上 一 节 相 同 的 nav 代码 。 可 以 在 本 书 网 
站 查看 完整 的 代码 (www.bruceontheloose.comy/ 
htmlcss/examples/ )。 在 这 个 例子 里 只 有 段落 和 图 像 ， 
Aii article 可 以 包含 各 种 类 型 的 内 容 ， 如 视频 、 

图 形 、 列 表 等 。 这 段 代码 生成 的 页 面 如 图 3.9.2 
所 示 






































Antoni Gaudi, Barcelona's architect - Mozilla Firean 



















File Edt View History Bookmarks Tools Help 





[i “Antoni Gaudi, Barcelona's architect 





* Barcelona's Architect 


* La Sagrada Familia 
* Park Guell 


Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to 
Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage years, coupled 
with his quiet but firm devotion to the church, made a unique 
foundation for his thoughts and ideas. His search for simplicity, based 
on his careful observations of nature are quite apparent in his work, 
from the Park Guell and its incredible sculptures and mosaics, to the 
Church of the Sacred Family and its organic, bulbous towers 


La Sagrada Família 


The complicatedly named and curiously unfinished 
masterpiece that is the Expiatory Temple of the Sacred Family is the si 
most visited building in Barcelona. In it, Gaudí combines his vision of 





图 3.9.2 现在 ， 页 面 有 了 header, nav 和 article 
元 素 ， 以 及 它们 各 自 的 内 容 。 在 不 同 的 浏览 器 中 ， 
article 中 标题 的 字号 可 能 不 同 。 可 以 通过 CSS 使 
它们 在 不 同 的 浏览 器 中 显示 相同 的 大 小 (参见 第 
10 章 ) 














创建 文章 的 步骤 

(1) 输入 <article>。 

(2) 输入 文章 的 内 容 。 内 容 可 以 包含 任意 
数量 的 元 素 。 元 素 类 型 包括 段落 、 列 表 、 音 频 、 
视频 、 图 像 、 图 形 等 。 

(3) 输入 </article>。 


正如 你 在 3.4 节 中 学 到 的 ，article 
是 四 个 分 块 内 容 元 素 中 的 一 个 ， 另 外 三 个 是 
nav, section 和 aside。 


可 以 将 article S£ £ 4E X; — ^ article 
里 面 ， 只 要 里 面 的 article 与 外 面 的 article 
是 部 分 与 整体 的 关系 。 不 过 ， 不 能 将 article 
4 4k address 元 素 里 面 。 
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一 个 页 面 可 以 有 多 个 article 元素 article 和 section 元 素 很 容易 相互 
TP 没有 ) 。 例 如 ， 博 客 的 主页 通常 包 混淆， 这 也 是 我 直接 引用 HTMLS 有 关 定 义 的 
括 几 篇 最 新 的 文章 ， 其 中 每 一 篇 都 是 其 自身 ” 原因 。 我 不 希望 你 将 它们 的 意思 理解 偏 。 我 
的 article。 会 在 3.10 节 中 讨论 section 以 及 如 何在 这 两 
”个 元 素 之 间作 出 选择 。 
一 个 article 里 包含 一 个 或 多 个 
section 元 素 并 不 是 强制 性 的 。 让 article 开国 有 要 了 解 在 哪 种 情况 下 可 对 article 使 
里 的 hl ~ h6 独自 存在 也 是 很 好 的 ， 不 过 定 。 用 role="main"， 参见 3.14 节 。 在 图 39.1 中 的 
X section 则 会 让 文章 的 语义 更 明显 。 每 个 article 放 入 这 段 代码 是 合理 的 ， 因 为 该 元 素 是 页 
section 都 可 以 有 自己 的 标题 层级 关系 (参见 面 主 要 内 容 的 容器 ， 不 过 我 有 意 略 去 了 ， 以 避免 
3.4 节 ) 。 给 读者 留 下 所 有 article 元 素 都 需要 role="main" 
的 印象 。 


更 多 article 示例 
图 3.9.1 中 的 示例 只 是 使 用 article 的 一 种 方式 ， 下 面 看 看 其 他 的 用 法 。 
例 1 (基本 文章 ) 


<article> 
«hi»The Diversity of Papua New Guinea«/hi» 
«p»Papua New Guinea is home to more than 800 tribes and languages ...«/p» 


。[ 改 事 内 容 的 其 余部 分 ] .…. 


«footer» <!-- arzticle 的 页 脚 ， 而 非 页 面 的 页 脚 --> 
«p»Leandra Allen is a freelance journalist who earned her degree in 
»anthropology from the University of Copenhagen.«/p» 
«address» 
You may reach her at «a href-"mailto:leandraGtherunningwriter.com"» 
—> leandragtherunningwriter.com«/a». 
«/address» 

«footer» 

«/article» 


注意 footer fe address 元 素 的 使 用 ( 对 它们 的 讨论 分 别 参 见 本 章 和 第 4 章 ) 。 这 里 ， 
address 只 应 用 于 其 父 元 素 article, 而 非 整 个 页 面 或 任何 包含 在 那个 article 里 面 的 article 
( 如 例 2 中 的 读者 评论 ) 。 

45] 2.J& a 1 4 E article 父 元 素 里 面 的 article 元 素 。 该 例 中 说 套 的 article 是 用 户 
提交 的 评论 ， 就 像 你 在 博客 或 新 闻 站 上 见 到 的 评论 部 分 。 该 例 还 显示 了 section 元素 (参见 
3.10 55) fe time 元 素 ( 在 第 4 章 讨 论 ) 的 用 法 。 
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HEERE MA) 


<article> 
«hi»The Diversity of Papua New Guinea</h1> 
. [ 父 元 素 文章 内 容 ] ... 


«footer» 
. [ 父 元 素 文章 页 脚 ] ... 
«/footer» 


«section» 
«h2»Reader Comments«/h2» 
«article» 


«footer»travelgal wrote on «time datetime-"2011-11-17" 
+» pubdate»November 17, 2011«/time»:«/footer» 
«p»Great article! I've always been curious about Papua New 


» Guinea.«/p» 
«/article» 
«article» 
。 [下 一 篇 读者 评论 ] ... 
«/article» 
«/section» 
«/article» 


些 只 是 使 用 article 及 有 关 元 素 的 几 个 常见 方式 。 


3.10 EXKI 


article 元 素 有 一 个 语义 性 弱 一 些 的 “近亲 ” 
元 素 一 一 section， 它 也 是 HTMLS 的 新 元 素 。 

HTMLS 对 该 元 素 的 定义 如 下 。 

section 元 素 代 表 文 档 或 应 用 的 一 个 一 般 














的 区 块 。 在 这 里 ，section 是 具有 相似 主题 的 
一 组 内 容 ， 通 常 包 含 一 个 标题 ， 如 图 3.10.1 
所 示 。 


section 的 例子 包含 章节 、 irn 
中 的 各 种 标签 页 、 论 文中 带 编 号 的 区 块 。 
BR o OS. 
系 信息 等 区 块 。 

article 和 section 元 素 极为 相似 。 如 果 
对 如 何 区 分 这 两 个 元 素 仍 存 疑惑 ， 参 见 “ 如 
何在 article 和 section 中 作出 选择 ”。 


定义 区 块 的 步骤 

(1) 输 入 «section», 

(2) 输入 区 块 的 内 容 。 内 容 可 以 包含 任意 
数量 的 元 素 。 元 素 类 型 包括 段落 、 列表、 音频、 
视频 、 图 像 、 图 形 等 。 

(3) 输入 </section>。 


正如 你 在 3.4 节 中 学 到 的 ，section 
是 四 个 分 块 内 容 元 素 中 的 一 个 ， 另 外 三 个 是 
nav, article 和 aside, 





默认 情况 下 ， 你 在 查看 页 面 时 无 法 看 
到 应 用 section 后 的 变化 ( article 也 是 这 样 )， 
不 过 重要 的 是 在 文档 中 使 用 这 些 元 素 可 以 增 
强 语义 性 ， 参 见 图 3.10.2。 当 然 ， 你 可 以 使 用 


CSS 对 section 和 article 元 素 添加 样式 。 





基本 HTML 结构 








«body» 
«header» 
«nav role-"navigation"» 
. [EAk] ... 
«/nav» 
«/header» 


«article» 
«hi id-"gaudi"»Barcelona's Architect«/hi» 


«p»Antoni Gaudí's incredible buildings 
— bring millions of tourists to 
— Barcelona each year.«/p» 


。 [ 另 一 个 介绍 性 段落 ] ... 


«section» 
«h2 id-"sagrada-familia" lang-'es"»La 
> Sagrada Família«/h2» 


<p><img src-"img/towers.jpg" 

— width-"75" height-"100" alt= 

— "Sagrada Família Towers" /» The 

— complicatedly named and curiously 

— unfinished masterpiece that is 

— the Expiatory Temple of the 

— Sacred Family is the most visited 

— building in Barcelona. In it, Gaudí 

— combines his vision of nature and 

— architecture with his devotion 

— to his faith. The Sagrada Família 

— attracts even the non-religious to 

— its doors in large part due to its 

— tragic story and its still 

— unfinished state, of which the 

— everpresent scaffolding and cranes 

— are permanent reminders.«/p» 
«/section» 


«section» 
«h2 id-"park-guell'»Park Guell«/h2» 


。[ 另 一 个 图 像 和 段落 ] ... 











</section> 
«article» 
«/body» 
</html> 
E 3.10.1 这 段 代 码 与 前 面 的 代码 相 比 ， 只 是 对 








article 中 介绍 文字 后 面 两 个 部 分 分 别 用 了 一 个 
section 包 起 来 ， 其 他 部 分 完全 相同 。 为 了 简洁 ， 
我 再 次 对 代码 进行 了 缩写 





SUB 记 住 ，section 不 是 一 个 像 div 一 样 的 
通用 容器 ， 因 为 section 表达 一 定 的 含义 ， 而 
div 则 没有 任何 语义 上 的 含义 (参见 3.13 3). 


(JEN) 本章 有 好 几 个 例子 可 以 帮助 你 理解 如 
fp ( 以 不 同 的 方式 ) 使 用 article 和 section, 


Td 有 要 了 解 在 哪 种 情况 下 可 对 section 使 


用 role="main"， 参 见 3.14 节 。 

















Antoni Gaudi, Barcelona's architect -Mozilla Firefaw 
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* Barcelona's Architect 


* La Sagrada Familia 
* Park Guell 


Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to 
Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage years, coupled 
with his quiet but firm devotion to the church, made a unique 
foundation for his thoughts and ideas. His search for simplicity, based 
on his careful observations of nature are quite apparent in his work, 
from the Park Guell and its incredible sculptures and mosaics, to the 
Church ofthe Sacred Family and its organic, bulbous towers 


La Sagrada Família 


The complicatedly named and curiously unfinished 
masterpiece that is the Expiatory Temple ofthe Sacred Family is the 
most visited building in Barcelona. In it, Gaudí combines his vision of 


v 


K 3.10.2 现在， 页面 有 了 header, nav, article 
和 section 元 素 ， 以 及 它们 各 自 的 内 容 。 添 加 
section 元 素 之 后 ， 默 认 的 显示 效果 不 会 发 生 改 变 
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如 何在 article 和 section 中 作出 选择 

我 特意 引用 了 HTMLS 对 section 和 article 的 定义 (参见 3.9 节 ) 帮助 你 理解 它们 的 区 别 ， 
因为 它们 的 区 别 有 时 很 细微 。 不 妨 这 样 考虑 : 你 的 内 容 是 适合 用 做 聚合 的 一 块 独立 的 内 容 或 一 个 
小 组 件 吗 ? 如 果 是 ， 就 使 用 article ( 否则， 在 大 多 数 情况 下 ， 使 用 section; 另 参 见 3.13 节 了 解 
什么 时 候 用 div RÆ) 。 这 并 不 意味 着 你 必须 聚合 或 分 发 article 内 容 ， 只 是 其 内 容 适 合 这 样 做 。 

如 果 你 仍然 觉得 article fe section 有 时 看 起 来 很 相似 , 另 担 心 , 不 只 你 自己 有 这 种 感觉 ， 
即便 是 经 验 丰 富 的 开发 人 员 有 时 也 会 将 这 两 个 元 素 用 错 。 

正如 我 在 第 1 章 提 到 过 的 ， 对 内 容 进行 标记 时 ， 并 非 总 能 分 出 对 和 错 ， 只 是 大 多 数 时 候 
有 正确 的 选择 。 而 其 他 时 候 ， 就 只 能 依靠 个 人 对 最 适合 描述 内 容 的 HIML 元 素 的 感 党 了 

J article fe section 之 间作 选择 时 ， 一定 要 仔细 考虑 ， 不 过 也 不 必 每 次 都 对 是 否 用 对 
感到 担心 。 有时， 些许 主观 并 不 会 影响 页 面 正 常 工 作 。 而 且 ， 也 不 会 有 人 半夜 来 敲 你 的 门 。 

哦 ， 我 可 能 会 ， 不 过 这 只 是 因为 外 面 很 黑 ， 很 吓人 。 


没有 article 的 section 示例 

目前 你 已 见 过 几 个 说 套 在 article 里 面 的 section 的 例子， 参见 图 3.10.1。 但 那 只 是 该 元 
素 的 二 种 用 法 。 

下 面 的 例子 来 自 HTML5 的 规范 ( 略 有 改动 ) 。 在 这 个 例子 中 ， 你 会 看 到 没有 article 
的 section 的 应 用 。( 你 还 会 提前 看 到 有 序列 表 的 应 用 。 第 15 章 会 讲 到 ol1 和 其 他 的 列表 元 素 。) 


«body» 
«hi»graduation program«/hi» 


«section» 
«h2»Ceremony«/h2» 
«ol» 
«li»Opening Procession«/li» 
«li»Speech by Valedictorian«/li» 
«li»Speech by Class President«/li» 
«li»Presentation of Diplomas«/li» 
«li»Closing Speech by Headmaster«/li» 
«/ol» 
«/section» 


«section» 
«h2»Graduates (alphabetical)«/h2» 
«ol» 
«li»Molly Carpenter«/li» 
«li»Anastasia Luccio«/li» 
«li»Ebenezar McCoy«/li» 
<li>Karrin Murphy«/li» 
«li»Thomas Raith«/li» 
«li»Susan Rodriguez«/li» 
«/ol» 
«/section» 
«/body» 
«/html» 
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已 下 fni k 
3.11. 指定 侧 栏 内 容 并 不 那么 相关 ， 但 可 以 独立 存在 ， 如 图 
有 时 ， 你 有 一 部 分 内 容 与 页 面 的 主体 3.11.1 所 示 。 如 何在 语义 上 表示 出 来 呢 ? 





«body» 


«header» 
«nav role-"navigation"» 
. [包含 链接 的 ul] ... 
</nav> 
</header> 


<article> 
<h1 id="gaudi">Barcelona's Architect</h1> 
。 [介绍 性 段落 ] .…. 


«section» 
«h2 id-"sagrada-familia" lang-'es"»La Sagrada Família«/h2» 
es [图 像 和 段落 ] ... 


«/section» 


«section» 
«h2 id-"park-guell"»Park Guell«/h2» 
。 [ 另 一 个 图 像 和 段落 ] ... 
«/section» 
«article» 


«aside role-"complementary"» 
«hi»Architectural Wonders of Barcelona«/h1» 


«p»Barcelona is home to many architectural wonders in addition to Gaudí's work. Some of them 
— include:«/p» 
«ul» 
«li lang-'es'»Arc de Triomf«/li» 
«li»The cathedral «span langz'es"»(La Seu)«/span»«/li» 
«li lang-'es"»Gran Teatre del Liceu«/li» 
«li lang-'es"»Pavilion Mies van der Rohe«/li» 
«li lang-'es"»Santa Maria del Mar«/li» 
</ul> 


<p>Credit: «a href-"http://www.barcelona.de/en/barcelona-architecture-buildings.html" 
> rel-"external"»«cite»Barcelona.de«/cite»«/a».«/p» 
«/aside» 


</body> 
</html> 


























图 3.11.1 这 个 aside 是 有 关 巴 塞 罗 那 建筑 奇迹 的 信息 ,与 页 面 主要 关注 的 Antoni Gaudi 内 容 并 不 那么 相关 ， 
但 仍 可 以 独立 存在 。 我 可 以 将 它 明 套 在 article 里 面 ， 因 为 它们 是 相关 的 ， 但 我 还 是 决定 把 它 放 在 article 
后 面 ， 让 其 看 起 来 像 侧 栏 ，aside 里 面 的 role="complementary" 是 可 选 的 ， 但 它 可 以 提高 可 访问 性 。 人 参见 
最 后 一 条 提示 





























[n] 
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在 HTML5 之 前 , 一 直 无 法 显 式 地 做 到 这 
一 点 。 在 HTMLS 中 ,我 们 有 了 aside 元 素 ， 
如 图 3.11.2 所 示 。 






Antoni Gaudi, Barcelona's architect - Mozilla Firefax 


e Edt Wew Hstory Bookmarks Dos Heb ZIT 


| L Antoni Gaudi, Barcelona's architect s 
doors in large part due to its tragic story and its still unfinished state, of which the 悦 


everpresent scaffolding and cranes are permanent reminders. 








Park Guell 


2 The Park Guell always reminds me of Howard Roark in Ayn 


Rand's The Fountainhead. Gaudi's project in the Park Guell was to build a 
residential community whose residents would love where they lived. It was never 
finished. 


Perhaps that is for the best, since now we al? get to enjoy it. The Park Guell is 
set on a hill overlooking practically all of Barcelona. Its beautiful and even 
comfortable serpentine bench is filled with foreigners and locals alike every day 
ofthe week. Its mosaic lizards have become synonymous with the city itself. 


Architectural Wonders of Barcelona 


Barcelona is home to many architectural wonders in addition to Gaudi's work. 
Some of them include: 


* Arc de Triomf 

* The cathedral (La Seu) 

* Gran Teatre del Liceu 

* Pavilion Mies van der Rohe 
e Santa Maria del Mar 


Credit: Barcelona.de - 





3.11.2 aside 出 现在 文章 的 下 面 ， 因 为 在 
HTML 中 aside 就 跟 在 article 的 后 面 ， 参 见 图 
3.11.1。 可 以 看 到 ， 浏 览 器 在 默认 情况 下 并 未 对 
aside 应 用 任何 特殊 样式 (除了 在 新 行 开 始 ) 。 

不 过 ， 可 以 通过 CSS 控制 其 外 观 显 示 ， 参 见 
3.11.3 


很 容易 将 aside 看 做 侧 栏 ， 如 图 3.11.3 所 
示 , 但 aside 元 素 其 实 可 以 用 在 页 面 的 很 多 地 
方 。 在 哪儿 使 用 它 依 上 下 文 而 定 。 它 可 以 是 
主要 内 容 中 的 一 个 框 ， 或 者 与 主要 内 容 位 于 
同一 栏 而 并 未 岗 套 , 或 者 位 于 (或 作为 ) 侧 栏 。 
aside 的 例子 包括 抬升 式 引用 、 侧 栏 、 新 闻 站 
上 列 出 相关 文章 的 链接 框 、 广 告 、nav 元 素 组 
( 如 博客 的 友情 链接 ) Twitter 源 、 商 业 站 
上 相关 产品 列表 。 








* Barcelona's Architect * La Sagrada Familia > Fark Guell 


BARCELONA'S ARCHITECT 


Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 
Architectural Wonders 
of Barcelona 
Barcelona i» home to many 
architectural — wonders — in 


addition to Gaudi's work. Some 
of them include: 


LA SAGRADA FAMÍLIA 


The complicatedly named and curiously unfinished masterpiece mat is 
AM] ine Ecpintory Temple of the Sacred Famity is the most visited building 
in Barcelona, In it, Ga 'ombines his vision of nature and 


The Sagrada Familia attract 
even the non-religious to it je part due to its tragic story Cft Pareelona de 
and its still unfinished state, of which the evarpresunt scaffolding and cranes are 


permanent reminders, 


PARK GUELL 


" The Park Guell always reminds me of Howard Roark in Ayn Rand's 
Papel Tc Fountainhead. Gaudi's project in the Fark Guell was to build a 
26 n Jon 


lived. It was never finished, 


Perhaps that is for the best, sin e all get to enjoy it. The Park Guell is sel on 
hil d 


and even comfortable 
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3.11.3 ”对 已 完成 的 页 面 应 用 CSS 时 ， 可 让 
aside ( LJ Architectural Wonders of Barcelona 开头 ) 
显示 在 主要 内 容 的 旁边 ， 而 不 是 下 边 。 这 个 例子 已 
Hf aside 做 成 了 侧 栏 ( 我们 将 在 第 11 章 学 习 如 何 
制作 两 栏 布 局 ) 


Eea 








指定 侧 栏 的 步骤 

(1) 输入 <aside>。 

(2) 输入 侧 栏 的 内 容 。 内 容 可 以 包含 任意 
数量 的 元 素 。 元 素 类 型 包括 段落 、 列表、 音频 、 
视频 、 图 像 、 图 形 等 。 

(3) 输入 «/aside», 


尽管 aside 的 一 种 用 法 是 标记 侧 栏 的 
内 容 ， 参 见 图 3.11.3， 但 aside 元 素 本 身 并 不 
影响 页 面 的 布局 ， 参 见 图 3.11.2。 


如 果 在 侧 栏 中 使 用 一 个 或 多 个 aside 

(或 将 其 作为 侧 栏 使 用 ) ， 应 在 HTML 中 
将 它们 放 在 页 面 主 要 内 容 的 后 面 ， 参见 
图 3.11.1。 将 重要 的 内 容 放 在 前 面 有 利于 SEO 
和 提升 可 访问 性 。 可 以 通过 CSS 改变 它们 在 
浏览 器 中 显示 的 顺序 。 
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对 于 与 内 容 有 关 的 图 像 ( 如 图 表 、 图 CES 和 要 了 解 如 何在 aside 中 使 用 role="co- 
形 或 带 有 说 明文 字 的 插图 ) ,使 用 figure ( mplementary"， 参 见 3.14 节 。 
见 第 4 章 ) mat aside, 


HTMLS 不 允许 将 aside 4X & f£ addr- 
ess 元 素 内 。 


其 他 aside 示例 


上 面 提 到 ，aside 可 以 与 主要 内 容 位 于 同一 栏 ， 可 以 峙 套 在 主要 内 容 里 ， 也 可 以 诗 套 在 
侧 栏 里 。 

例 1 展示 了 座 套 在 相关 内 容 中 的 aside, 

例 1〈 骨 套 在 主要 内 容 中 ) 


«body» 
«article» 
«hi»The Diversity of Papua New Guinea«/hi» 
es [£X B] ... 
«aside» 
«hi»Papua New Guinea Quick Facts«/hi» 
«ul» 
«li»The country has 38 of the 43 known birds of paradise«/li» 
«li»Though quite tropical in some regions, others occasionally 
> experience snowfall.«/li» 
«/ul» 
«/aside» 
ooo. [ELE SESS] ioc 
«/article» 
«/body» 
«/html» 


这 个 article 也 可 以 包含 一 个 抬升 式 引 用 ， 这 也 应 该 包 在 aside 里 。 也 可 以 弄 一 个 “ 相 
关 故 事 ”aside， 包 含 一 组 指向 关于 该 国 或 周边 地 区 (印度尼西亚 、 澳 大 利 亚 等 ) 其 他 文章 的 
链接 。 另 外 ，aside 还 可 以 位 于 页 面 的 另外 一 栏 ， 而 不 是 页 套 在 article 里 。 

我 们 已 看 到 了 aside 位 于 侧 栏 的 例子 (图 3.11.1 和 图 3.11.3 ) 。 现 在 ， 考 虑 一 套 设计 作品 
或 一 组 案例 研究 的 例子 ， 其 中 每 个 HTML 页 面 展 示 一 个 项 目 ， 并 在 毗邻 的 一 栏 里 (显示 位 置 
由 CSS 控制 ， 而 不 是 由 例 2 中 的 代码 控制 ) 提供 指向 其 他 项 目 页 面 的 链接 ( 误 套 在 nav 里 ) 。 

例 2 (aside 并 未 府 套 在 主要 内 容 里 ， 且 包含 一 个 nav) 


<body> 
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<!-- 页 面 的 主体 内 容 --> 

«article» 
«hi»... [项 目 名 称 ] ...«/h1» 
«figure»... [项 目 图 片 ] ...«/figure» 
«p»... [项 目 信息 ] ...</p> 

«/article» 


<!-- iX Maside} 4 X E #articleP --> 
«aside» 
«hi»Other Projects«/hi» 
«nav» 
«ul» 


<li><a href-"habitat-for-humanity.html"»Habitat for Humanity 


— brochure«/a»«/li» 


«li»«a href-"royal-philharmonic.html"»Royal Philharmonic Orchestra 


— site«/a»«/li» 
</ul> 
</nav> 
</aside> 


</body> 
</html> 


将 这 个 aside REER E article 里 也 是 极 好 的 选择 ， 因 为 它们 是 相关 的 。 


3.12 创建 页 脚 


当 你 想到 页 脚 的 时 候 ， 你 大 概 想 的 是 页 
面 底部 的 页 脚 。HTMLS 的 footer 元 素 的 功 
能 不 止 这 一 个 ， 而 是 像 header 一 样 ， 可 以 用 
在 其 他 地 方 。 

footer UICE EHI] article, 
aside, blockquote, body, details, 
fieldset, figure, nav, section 或 td 元 素 的 页 
脚 。 只 有 当 它 最 近 的 祖先 是 body 时 ， 它 才 是 
整个 页 面 的 页 脚 ， 参 见 图 3.12.1 和 图 3.12.2。 
如 果 一 个 footer 包 着 它 所 在 区 块 (如 一 个 
article) 的 所 有 内 容 ， 它 代表 的 是 像 附录 、 
索引 、 版 权 页 、 许 可 协议 这 样 的 内 容 。 


创建 页 脚 的 步骤 
(1) 放 光标 放 在 希望 创建 页 脚 的 元 素 里 。 








(2) 输 入 <footer>。 
(3) 输入 页 脚 的 内 容 。 
(4) 输入 «/footer», 


页 脚 通常 包含 关于 它 所 在 区 块 的 信 
息 ， 如 指向 相关 文档 的 链接 、 版 权 信 息 、 作 
者 及 其 他 类 似 条 目 。 参 见 “ 其 他 footer 示例 ” 
中 的 例 1 和 例 2。 

页 脚 并 不 一 定 要 位 于 所 在 元 素 的 末 
尾 ， 不 过 通常 是 这 样 的 。 


不 允许 在 footer 里 说 套 header 或 另 
一 个 footer。 同 时 ， 也 不 能 将 footer KEA 
header 或 address 元 素 里 。 





52 第 3 章 基本 HTML 结构 








«body» 
«header» 
«nav role-"navigation"» 
[包含 链接 的 ul] ... 
«/nav» 
«/header» 


«article» 
«hi id-"gaudi"»Barcelona's Architect«/hi» 
. [介绍 性 段落 ] ... 


«section» 
«h2 id-"sagrada-familia" lang-'es"»La 
> Sagrada Família«/h2» 
. [图 像 和 段落 ] ... 


«/section» 


«section» 
«h2 id-"park-guell'»Park Guell«/h2» 
。[ 另 一 图 像 和 段落 ] …. 
«/section» 
«article» 


«aside role-"complementary"» 
«hi»Architectural Wonders of Barcelona 
 «/hi» 

。[ 侧 栏 的 其 余 内 容 ] …. 


«/aside» 


«footer» 
<p><small>&copy; Copyright 2011«/small» 
o </p> 

«/footer» 


«/body» 
</html> 














E 3.12.1 这 个 footer 代表 整个 页 面 的 页 脚 ， 
有 了 

















为 它 最 近 的 祖先 是 body 元 素 。 现 在 ， 页 面 











header, nav, article, section, aside 和 footer 





元 素 。 并 非 每 个 页 面 都 需要 全 部 这 些 元 素 ， 但 

















确实 代表 了 HTML 中 可 用 的 主要 页 面 构成 要 素 





它们 





Antoni Gaudí, Barcelona's architect - Mozilla Firefox 


Ele Edt Wew History Bookmarks Tols Help 


L- Antoni Gaudi, Barcelona's architect + s 
set on a hill overlooking practically all of Barcelona. Its beautiful and even al 


comfortable serpentine bench is filled with foreigners and locals alike every day 
ofthe week. Its mosaic lizards have become synonymous with the city itself. 








Architectural Wonders of Barcelona 


Barcelona is home to many architectural wonders in addition to Gaudi's work. 
Some of them include: 


* Arc de Triomf 

* The cathedral (La Seu) 

* Gran Teatre del Liceu 

* Pavilion Mies van der Rohe 
* Santa Maria del Mar 


Credit: Barcelona.de 


© Copyright 2011 - 


3.12.2 footer 元 素 本 身 不 会 为 文本 添加 任何 
默认 样式 。 这 里 ， 版 权 信 息 的 字号 比 普通 文本 的 
小 ， 这 是 因为 它 般 套 在 用 于 对 法 律 文本 进行 语义 化 
的 small 元 素 里 (参见 第 4 章 ) 。 像 其 他 内 容 一 样 ， 
可 以 通过 CSS 修改 字号 


























要 了 解 footer 如 何 取代 HTML5 之 前 
div 元 素 的 一 个 功能 ， 参 见 3.13 节 


异国 有 要 了 解 在 哪 种 情况 下 可 对 footer 使 
用 TYole="contentinfo"， 参 见 3.14 节 。 在 图 
3.12.1 中 的 footer 放 入 这 段 代 码 是 合理 的 ， 
因为 它 代表 的 是 整个 页 面 的 页 脚 ， 不 过 我 有 
意 略 去 了 ， 避 免 给 读者 留 下 所 有 footer 元 素 

都 需要 role="contentinfo" 的 印象 。 参 见 “ 其 
他 footer 示例 ”中 区 分 与 正确 使 用 Tole 的 
示例 。 
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其 他 footer 示例 

我 们 已 经 学 习 了 整个 页 面 footer 的 一 个 例子 ， 参 见 图 3.12.1 和 图 3.12.2。 下 面 是 另 一 个 
页 面 的 footer， 其 中 的 内 容 更 多 一 些 。 

例 1( 整 个 页 面 的 页 脚 》 


<body> 
e [页 届 和 内 容 ] ... 





<!-- 这 是 页 面 的 页 脚 ， 因 为 body 是 其 最 近 的 祖先 --> 
<footer role="contentinfo"> 
<p><small>&copy; Copyright 2011 The Corporation, Inc.</small></p> 


«ul» 
<li><a href-"terms-of-use.html"»Terms of Use«/a»«/li» 
<li><a href-"privacy-policy.html"»Privacy Policy«/a»«/li» 
«/ul» 
«/footer» 
«/body» 
«/html» 


下 面 的 例子 展示 了 位 于 一 个 页 面 区 块 (这 里 是 article ) 里 的 一 个 footer, ZUR EZ X 
个 页 面 页 脚 的 另 一 个 footer。 (对 address 元 素 的 解释 ， 参 见 “ 更 多 article 示例 ”。 ) 
例 2 作为 页 面 区 块 和 整个 页 面 的 页 脚 ) 


<body> 


«article» 
«hi»... [文章 标题 ] ..…/h1> 
«p... [XX A] ...«/p» 
<!-- 文章 的 页 脚 --> 
«footer» 
«p»Leandra Allen is a freelance journalist who earned her degree 
^in anthropology from the University of Copenhagen.«/p» 
«address» 
You may reach her at «a href-"mailto: leandraGtherunningwriter. 
> com"»leandraG6therunningwriter.com«/a». 
«/address» 
«/footer» 
«/article» 


<!-- 页 面 的 页 脚 -> 

«footer id-"footer-page" role="contentinfo"> 
. [版 权 信 息 、 使 用 条 款 、 隐 私 政策 等 ] .…. 

«/footer» 

«/body» 

</html> 
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页 脚 中 的 id="footer-page" (可 以 指定 任何 有 效 的 id) 是 可 选 的 ， 
与 另 一 个 footer 区 分 开 ， 从 而 能 为 三 者 分 别 设置 样式 。 





role-"contentinfo", AJL 3.14 节 了 解 此 功能 。 
3.13 创建 通用 容器 
有 时 需要 在 一 段 内 容 外 围 包 一 个 容 央 ， 


从 而 可 以 为 其 应 用 CSS 样式 或 JavaScript 效 
果 。 如 果 没 有 这 个 容器 ， 页 面 就 会 不 一 样 ， 


参见 图 3.13.1。 不 过 ， 当 评估 内 容 ， 考 虑 使 
用 article, section, aside, nav 等 元 素 的 


真正 需要 的 是 一 个 通用 容器 ， 完全 没有 
任何 语义 含义 的 容器 。 这 1 Mem div (来 
H division 一 词 ) 元 素 ， 参 见 图 3.13.2。 有 了 
div， 就 可 以 为 其 添加 样式 ( 如 图 3.13.3 所 示 ) 
或 JavaScript 效果 了 。 一 定 要 阅读 补充 材料 ， 
了 解 什么 时 候 可 以 在 页 面 中 使 用 div。 















[inona paronan aite 








* Barcelona's Architect * La Sagrada Familia * Park Guell 


BARCELONA'S ARCHITECT 


Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 





Architectural Wonders 
of Barcelona 


Gaudi's Wu already visible in his ur Ps coupled with his quiet but 
» His 


LA SAGRADA FAMÍLIA 


The complicatedly named and curiously unfinished masterpiece that is the 
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图 3.13.1 在 不 使 用 div 元 素 的 情况 下 ， 我 们 实现 
了 这 个 设计 。 不 过 ， 为 页 面 内 容 加 上 div 以 后 (如 














其 目的 是 将 其 
主意 只 有 整个 页 面 的 页 脚 有 





«body» 


«div» 
«header» 
«nav role-"navigation"» 
. [包含 链接 的 册 ] ... 
«nav» 
«/header» 


«article» 
«hi id-"gaudi"»Barcelona's Architect 
» </h1> 
. [介绍 性 段落 ] ... 


«section» 
，[ 标 题 、 图 像 和 段落 ] ue 


«/section» 


«section» 
. [标题 、 另 一 图 像 和 段落 ] ... 
«/section» 
«article» 


«aside role-"complementary"» 
«hi»Architectural Wonders of 
» Barcelona«/h1» 
。[ 侧 栏 其 余 内 容 ] .…. 
«/aside» 


«footer» 
。[ 版 权 信 息 ] ... 
«footer» 
«/div» 


«/body» 
</html> 




















E 3.13.2 现在 有 一 个 div 包 着 所 有 的 内 容 。 页 面 











图 3.13.2 所 示 ) ， 我 们 有 了 一 个 可 以 添加 更 多 样式 
的 通用 容器 ( 参见 图 3.13.3 显示 的 效果 ) 

















的 语义 没有 发 生 改 变 ， 但 现在 我 们 有 了 一 个 可 以 用 
CSS 添加 样式 的 通 重用 容器 ， 参见 图 3.13.3 


邮 


3.13 ”创建 通用 容器 55 





* Barcelona's Architect $ la Sagrada Familia —— * Park Guell 


BARCELONA'S ARCHITECT 


Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 
Architectural Wonders 


Gaudís (ormity, already visible ir his les y coupled wit i à 
tudis non-conformity already visible in his leniage years, coupled Willis qu of Barealona 


but firm devotion to the church, made a unique foundation for his thoughts and 

ideas. His search for simplicity, based on his careful observations of nature are quite Barcelona is home to many 

apparent in his work, from the Park Guell and its incredible sculptures and mosaics, — areMteetuml we 

to the Church of the Sacred Family and it organic, bulbous lowers. Addition to Gaudi's work. Some 
of them meludel 


LA SAGRADA FAMILIA 

* Are de Triomf 
$ The cathedral (La Seu) 
G icon 


J The complicatedly named and cririousty unfinishad masterpiece rhat is 
CM e eepatory Temple of the saerea Family te rhe most visited buiding 
im Barcelona Im it, Gaud combines his vision of ratur and 


architecture with his devotion to his faith, The Sagrada Familia attracts 
even the non-religious to its doors in large part due to its tragic story 


and its still unfinished state, of which the everpresent scaffolding and cranes ure 
permanent reminders, 


PARK GUELL 


Tho Park Guell always reminds me of Howard Roark in Ayn Rand's 
The Fountainhead, Gaudi's project in the ark Guell was to build a 
residential community whose residents would love where they 


Hvad, It was never finished. 


Perhaps that is for the best, since now we all get to enjoy it, The Park Guell is ser on. 
a hill overlooking. practically all of Bareslona. Iis beautiful and even comfortable. 
serpentine bench is filled with foreigners and locals alike every day of the week, Its 
mosaic lizards have become syrionyrous with the city itsel, 
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3.13.3 div 元 素 自 身 没有 任何 默认 样式 ， 除 
了 从 新 的 一 行 开始 出 现 ， 参 见 图 3.13.4。 不 过 ， 
你 可 以 对 div 添加 样式 以 实现 你 的 设计 。 这 里 ， 
我 对 div 添加 了 浅 蓝 色 的 背景 和 盒 阴 影 。 这 样 ， 
我 可 以 将 body 元 素 的 背景 改 为 紫色 ,使 内 容 凸 
显 出 来 。 我 还 为 aside 添加 了 细 边 框 。 你 可 以 看 
到 我 如 何 实现 这 个 页 面 的 HTML 和 CSS ( www. 
bruceontheloose.com/htmlcss/examples/ ) 


创建 通用 容器 的 步骤 

(1) 输入 «div», 

(2) 创建 容器 的 内 容 ， 内 容 可 以 包含 任意 
数量 的 元 素 。 

(3) 在 容器 的 结尾 处 输入 </div>。 











像 header, footer, article, 
section, aside, nav, h1 ~ h6、p 和 其 他 很 
多 元 素 一 样 ，div 在 默认 情况 下 自动 显示 在 新 
的 一 行 。 


div 对 使 用 JavaScript 实现 一 些 特定 
的 交互 行为 或 效果 也 是 有 帮助 的 。 例 如 ， 在 
页 面 中 展示 一 张 照片 或 一 个 对 话 框 ， 同 时 让 
背景 页 面 履 盖 一 个 半 透 明 的 层 (这 个 层 通常 
是 一 个 div) 。 


尽管 我 始终 强调 HTML 用 于 对 内 容 
的 含义 进行 描述 ， 但 div 并 不 是 唯一 没有 语 
义 价值 的 元 素 ,span 是 与 div 对 应 的 一 个 元 素 : 
div 是 块 级 内 容 的 无 语义 容器 ， 而 span ( 写 做 
«span» 这 里 是 内 容 </span> ) 则 是 短语 的 无 语 
义 容 器 ， 例 如 在 段落 元 素 p 之 内 。 参 见 第 4 
章 了 解 span。 


EED 有 要 了 解 如 何在 div 中 使 用 地 标 角色 ， 
参见 3.14 节 。 











Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 


Gandfs non-confonmiry, already visible in his teenage years, coupled with his quiet but firm devotion to the church, made a unique foundation. 
for his thoughto and ideas. Hiz search for simplicity, based on his carefil observations of nature are quite apparent in his work, From the Parlé 
Guel) and ts incredible sculptures and mosas, to the Church of the Sacred Famly and its orgamc, bulbous towers. 


La Sagrada Familia 


Pw corplicatedly named and curiously unfinished masterpiece that is the Expiatory Temple of the Sacred Family is the most. 


visited building in Barcelona. In it, Gaudí combines his vision of nature and architecture with his devotion to his faith. The Sagrada Farnllia 
attracts even the non-religious to ite doors in large part due to ite tragic tory and its ell unfinished state, of which the everpreent scaffolding 
and cranes are permanent reminders. 


Park Guell 


p 


The Park Guell always reminds me of Howard Roark in Ayn Kand's The Fountamhead, Gaudi's project in the Park Guell 
was to build a residential community wh Jents would love where they lived. Tt was never finished. 





Perhaps that is for the bost, since now we all gct to enjoy it. The Parle Gucl is sct on a hil overlooking practically all of Barcclona Its beautfl 
and even comfortable serpentine bench is filed with foreigners and locals alike every day of the week. Tts mosaic lizards have become. 
synonymous with the city itself 

Architectural Wonders of Barcelona 


Barcelona is home to many architectural wonders in addition to Gaudi's work. Some of them include 


* Arc de Triomf E 
* The cathedral (La Seu) 


图 3.13.4 ”同一 个 页 面 在 未 对 div、 标 题 、 段 落 等 
所 有 元 素 添 加 CSS 的 情况 下 的 样子 。 可 以 看 到 ， 
div 并 未 产生 任何 独特 的 样式 
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有 关 div 的 一 些 历 史 以 及 何 时 在 HTML5 中 使 用 它 

在 本 章 讲 到 的 结构 性 元 素 中 ， div Ahi ~ h6 以 外 唯一 早 于 HTML5 出 现 的 元 素 。 在 
HTMLS 之 前 ，div 有 是 包围 大 块 内 容 〈( 如 页 届 、 页 脚 、 主 要 内 容 、 揪 图、 侧 栏 等 ) 从 而 可 用 
CSS 为 之 添加 样式 的 不 二 选择 。 之 前 div 没有 任何 语义 含义 ， 现 在 也 一 样 。 

这 就 是 HTML5 引入 header、footer、article、section、aside 和 nav 的 原因 。 这 些 类 
型 的 构造 块 在 网 页 中 普遍 存在 ， 因 此 它们 可 以 成 为 具有 独立 含义 的 元 素 。 在 HTMLS P, div 
并 没有 消失 ， 只 是 用 得 上 它 的 场合 变 得 少 了 。 

让 我 们 看 几 个 使 用 div 的 常见 示例 。 

你 已 经 见 过 一 个 了 : 为 了 添加 样式 ， 用 一 个 容器 将 整个 页 面包 起 来 (参见 图 3132 和 图 
1 

如 何 用 div 实现 两 栏 布局 呢 ? 我 对 article fe aside 元素 分 别 添加 了 一 些 CSS， 让 它们 
各 自 成 为 一 栏 ( 我 们 将 从 第 7 章 开始 学 习 CSS; 关于 用 CSS 进行 布局 ， 参 见 第 11 章 ) 。 

然而 ， 大 多 数 情况 下 ， 每 一 栏 都 有 不 止 一 个 区 块 的 内 容 。 例 如 ， 主 要 内 容 区 第 一 个 
article 下 面 可 能 还 有 另 一 个 article (或 section, aside, 44), xb de, 也许 你 想 在 
第 二 栏 再 放 一 个 aside 显示 指向 关于 Gaudi 的 其 他 网 站 的 链接 ， 或 许 再 加 一 个 其 他 类 型 的 
XX. 

你 需要 将 希望 出 现在 同一 栏 的 内 容 包 在 一 个 div 里， 参见 图 3.13.5， 然 后 对 这 个 div 添 
加 相应 的 样式 。 ( 你 或 许 在 想 是 否 也 可 以 用 section, 但 要 知道 该 元 素 并 不 是 用 做 添加 样式 的 
通用 容器 。 ) 图 3.13.6 有 助 于 你 形象 地 理解 代码 和 项 望 呈 现 的 CSS 布局 之 间 的 关系 。 记 住 这 
只 是 这 段 HTML 可 能 形成 的 布局 之 一 。 要 知道 CSS 是 相当 强大 的 。 

因此 ， 将 希望 在 样式 上 组 成 一 栏 的 内 容 用 div 包 起 来 是 一 种 非常 常见 的 做 法 (当然 ,也 
可 以 用 div 包 住 两 个 以 上 的 栏 ) 。 至 于 放 在 其 中 的 内 容 ， 则 可 能 差别 极 大 ， 视 页 面 内 容 安排 
而 定 。 别 忘 了 ， 作 为 内 容 区 块 的 主要 语义 化 容器 ，article、section、aside fe nav 可 以 位 于 
任何 地 方 。 此 外 ，header 和 footer 也 是 这 样 。 在 本 例 中 ， 主 内 容 区 只 有 article， 侧 栏 只 
aside， 但 不 要 对 此 作 过 分 解读 。 

不 过 ， 可 以 肯定 的 是 ，div 应 该 作为 你 最 后 想到 的 容器 ， 因 为 它 没 有 任何 语义 价值 。 大 
多 数 时 候 ， 使 用 header, footer, article, section, aside 甚至 nav 代替 div 会 更 合适 。 但 
是 ， 如 果 语 义 上 不 合适 ， 也 不 必 为 了 刻意 避免 使 用 div 而 使 用 上 述 元 素 。 div 有 用 得 上 的 地 方 ， 
只 是 需要 限制 其 使 用 。 

说 到 这 里 ， 有 一 种 情况 ，div 适合 于 所 有 (或 几乎 所 有 ， 这 由 你 决定 ) 页 面容 器 ， 而 不 
是 使 用 新 的 HTMLS 元 素 。 更 多 信息 参见 11.3 节 。 
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«body» 

<!-- 开始 页 面容 器 --> 

«div id="container"> 
<header> 


</header> 


«1-- 应 用 CSS 后 的 第 一 栏 --> 
<div id="content"> 
«article» 
«article» 
«article» 
«article» 
es [所 需 的 其 他 区 块 ] ... 
«/div» 
<!-- 结束 第 一 栏 --> 
<!-- 应 用 CSS 后 的 第 二 栏 --> 
<div id="sidebar"> 
«aside» 
«/aside» 
«aside» 
«/aside» 
，[ 所 需 的 其 他 区 块 ] .… 
«/div» 
<!-- 结束 第 二 栏 --> 
«footer» 
«footer» 
«/div» 


<!-- 结束 页 面容 器 --> 


«/body» 
</html> 











3.13.5 ”这 个 页 面 有 一 个 包含 整个 页 面 的 div， 
另外 还 新 增 了 两 个 。 一 个 带 有 id-"content" 的 div 
集合 主体 内 容 ， 使 之 可 以 添加 样式 成 为 第 一 栏 。 另 
一 个 带 有 id="sidebar" 的 div 包 着 希望 显示 为 第 二 
栏 的 内 容 。 然 后 ， 可 以 在 CSS 中 使 用 id 找到 对 应 
的 div 并 为 其 添加 样式 


























<header> 
Page header 
</header> 


«div id="content "> <div id="sidebar"> 





Main page content (article 2) information 
e> 
</div> 
</div> 


<footer> 
Page Footer 
</footer> 














3.13.6 ”此 图 显示 了 图 3.13.5 中 代码 如 何在 概念 
上 对 应 到 CSS 布局 对 应 的 形式 。 这 是 很 常见 的 一 
种 安排 ， 但 只 是 针对 这 段 HTML 众多 可 能 的 CSS 
样式 中 的 一 种 。 一 定 要 阅读 3.14 节 ， 了 解 如 何 进 
一 步 增强 页 面 的 语义 和 可 访问 性 














3.14 ”使 用 ARIA 提升 可 访问 性 


在 1.2 节 的 “为 什么 语义 很 重要 ”小 节 中 
我 们 已 经 了 解 到 ， 对 内 容 用 最 适合 描述 它 的 
元 素 进 行 标记 可 以 提升 可 访问 性 。 如 果 你 一 
直 在 这 样 做 ， 非 常 好 。 在 这 一 节 ， 我 会 讲 到 
如 何在 HTML 中 添加 一 些 人 简单 的 属性 进一步 
提升 网 站 的 可 访问 性 。 

WAI-ARIA (Web Accessibility Initiative's 
Accessible Rich Internet Applications, J [t 1 
网 页 倡议 之 可 访问 的 富 互 联网 应 用 ， 也 简称 
ARIA) 是 一 种 技术 规范 ， 自 称 “ 有 桥 桨 作用 
的 技术 ”。 之 所 以 这 样 说 ， 是 因为 在 HTML 
提供 相应 的 语义 功能 之 前 ， 它 会 使 用 属性 来 
填补 一 些 语 义 上 的 空白 。 

例如 ， 如 果 你 想 让 屏幕 阅读 器 用 户 知 
道 如 何 跳 至 (或 跳 过 ) 页 面 的 主要 内 容 ， 应 
该 使 用 什么 HTML 标记 呢 ? 如 果 是 要 跳 
搜索 框 ， 又 该 使 用 什么 标记 呢 ?” 你 即将 了 角 
到 ， 虽 然 ARIA f HTMLS 之 间 有 一 些 重合 

(它们 都 致力 于 填补 一 些 语义 上 的 空白 ) ， 
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但 HTMLS 尚 没有 提供 上 述 两 个 问题 的 解决 
Fiko AMi, ARIA 的 地 标 角 色 (landmark 
role ) 可 以 做 到 。 地 标 角 色 可 以 帮助 用 户 识 
别 页 面 区 域 ， 包括 application, banner, 
complementary, contentinfo, form, main, 








navigation 和 search, 
尽管 地 标 角 色 和 HIML5 元素 之 间 有 
一 些 重合 ， 但 目前 屏幕 阅读 器 对 ARIA B xx 
持 更 多 。 因 此 你 可 以 继续 按 既 有 的 方式 创 
建 HTML， 同 时 添加 一 些 ARIA 角色 提升 页 
面 的 可 访问 性 。 在 图 3.14.1 中 ， 我 对 3.13 市 
中 的 示例 代码 添加 了 ARIA 地 标 角 色 和 一 
个 nav 元素 。 尽 管 我 对 每 个 aside 元 素 都 添 
加 了 complementary 角色 ,但 是 使 用 «div 
id-"sidebar" role="complementary"> 对 整个 
侧 栏 标记 complementary 角色 也 同样 是 有 效 的 。 在 
对 整个 div 标记 complementary 角色 之 前 ， 要 确保 
其 中 所 有 的 内 容 都 符合 complementary 内 容 的 标准 。 
下 面 是 ARIA 规范 中 对 几 种 地 标 角色 的 
定义 ， 以 及 推荐 的 用 法 。 图 3.14.1 中 的 代码 
和 图 3.14.2 的 代码 实现 演示 了 使 用 这 些 地 标 
角色 的 效果 ， 与 3.13 节 中 的 类 似 。 
O role-"banner" ( 横幅 ) 
包含 面向 全 站 内 容 而 非 页 面 特有 内 容 
的 区 域 。 
面向 全 站 的 内 容 通 常 包括 网 站 标志 、 
网 站 赞助 者 标志 、 全 站 搜索 工具 等 。 
横幅 通常 显示 在 页 面 的 顶端 ， 而 且 通 
笛 横 跨 整个 页 面 的 宽度 。 
用 法 : 将 其 添加 到 页 面 级 的 版 头 〈 通 
常 为 header 元 素 ), 每 个 页 面 只 用 一 次 。 
口 fole="navigation" (导航 ) 
指向 文档 内 不 同 部 分 或 相关 文档 的 导 
航 性 元 素 ( 通常 为 链接 ) 的 集合 。 
用 法 : 与 HTMLS 的 nav 元 素 相 似 ， 应 
将 其 添加 到 每 个 nav 元 素 ， 或 其 他 包含 
导航 性 链接 的 容器 。 这 个 role 可 在 每 


















































个 页 面 上 使 用 多 次 。 





«body» 


<!-- 开始 页 面容 器 --> 
«div id="container"> 
«header role-"banner"» 


«nav role-"navigation"» 
.. [包含 链接 的 Ul] ... 


«/nav» 
«/header» 


<!-- 应 用 CSS 后 的 第 一 栏 --> 
«div id="content" role="main"> 
<article> 
</article> 
<article> 
</article> 
.. [所 需 的 其 他 区 块 ] .…. 
«/div» 
<!-- 结束 第 一 栏 --> 
«-- 应 用 CSS 后 的 第 二 栏 --> 
«div id="sidebar"> 
«aside role-"complementary"» 
«/aside» 
«aside role-"complementary"» 
«/aside» 
. [所 需 的 其 他 区 块 ] .…. 
«/div» 
<!-- 结束 第 二 栏 --> 
«footer role-"contentinfo"» 
«footer» 
«/div» 


<1-- 结束 页 面容 器 --> 


«/body» 
</html> 








E 3.14.1 3.13 节 中 的 示例 代码 ， 新 增 了 一 个 nav 
元 素 和 5 个 不 同 的 地 标 角色 
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O role-"main" ( 主体 ) 
页 面 的 主体 内 容 。 
用 法 : 将 其 添加 到 内 容 主体 部 分 的 容 
器 。 这 个 容器 通常 是 一 个 div 元 素 ， 























也 可 能 是 一 个 article 或 section, KR 
在 极 少数 情况 下 ， 一 个 页 面 应 该 只 有 
一 个 标记 为 main 的 区 域 。 











<heador rolo-"banncor" 
Page header 


nav rolc-'navigation's 


mav> 

</header> 

«div id-"content" role="main"> 
«article» 


Main page content (article 1) 
</artiole> 


<articley 
Main page content (article 2) 
article» 





</div> 


«footer role="contentinfo"> 
Page Footer 
</LooLer> 








3.14.2. 这 是 3.13 节 中 的 布局 示意 图 ， 不 过 
现在 添加 了 ARIA 角色 。 正 文中 提 到 ， 也 可 以 将 
role="complementary" 加 到 侧 栏 div， 而 非 每 一 个 
aside 元 素 











O role="complementary" ( 补充 性 内 容 ) 
文档 中 作为 主体 内 容 补充 的 支撑 部 分 。 
它 对 区 分 主体 内 容 是 有 意义 的 。 
complementary 角色 表明 其 包含 的 内 容 
与 主体 内 容 是 相关 的 。 

用 法 : 与 HIML5 的 aside 元 素 相 似 ， 应 
将 其 添加 到 每 个 aside 或 包含 补充 性 内 容 
的 div. 这 个 zole 可 在 每 个 页 面 上 使 用 多 次 。 

O role-"contentinfo" (内 容 信息 ) 
包含 关于 文档 的 信息 的 大 块 可 感知 区 域 。 
这 类 信息 包括 版 权 声明 和 指向 隐私 权 
声明 的 链接 等 。 

用 法 : 将 其 添加 至 整个 页 面 的 页 脚 ( 通 
































常 为 footer 元 素 ) 。 

总 之 ,在 HTML 中 添加 ARIA 地 标 角色 
通常 是 个 好 主意 。 我 在 本 书 其 他 示例 和 配套 网 
站 中 也 使 用 了 它们 。 再 说 一 遍 ， 如 果 没 有 它们 ， 
页 面 也 照常 工作 ,但 加 入 它们 可 以 改善 一 些 用 
户 的 体验 。 提 示 中 列 出 的 屏幕 阅读 占 测 试 结 
可 以 帮 你 决定 是 否 应 该 使 用 它们 ( 结果 支持 除 
Window-Eyes 7.5 以 外 的 屏幕 阅读 器 ) o 


SEE 对 表单 元 素来 说 ，form 角色 是 多 余 的 。 
search 用 于 对 搜索 框 进 行 标记 (BBC, Yahoo! 
和 Google 有 时 用 到 该 角色 ， 同 时 也 用 到 了 其 


他 的 一 些 地 标 角色 ) 。application 为 高 级 用 法 。 









































EED 地 标 角 色 只 是 ARIA 规范 (www. 
w3.org/TR/wai-aria/ ) 众多 特性 的 一 种 。 你 或 
许 对 这 份 实施 指南 感 兴趣 : www.w3.org/WAI/ 
PF/aria-practices/。 


CES 无 席 碍 访问 倡导 者 Steve Faulkner 和 
Jason Kiss 分 别 发 表 了 屏幕 阅读 器 对 地 标 角 色 支 
持 情 况 的 测试 结果 (分别 位 于 www.html5accessi- 
bility.com/tests/landmarks.html 和 www.accessiblecu- 
Iture.org/research/html5-aria-2011/) o Faulkner 发 
表 的 相关 讨论 参见 www.paciellogroup.com/blog/ 
2011/11/latest-aria-landmark-support-data/ 和 www. 
paciellogroup.com/blog/201 1/07/html5-accessi-bility- 
chops-aria-landmark-support/ 。 


NVDA ( Windows 软件 ， 可 从 www. 
nvda-project.org 免费 下 载 ) VoiceOver ( Mac 
OS X 4e iOS 4+ 自 带 软件 ) 和 JAWS( Windows, 
可 在 www.freedomscientific.com 下 载 试用 版 ) 
是 最 先进 的 几 款 屏幕 阅读 器 。 强 烈 建议 你 至 
少 试用 其 中 的 一 种 ， 从 而 更 好 地 理解 语义 化 
HTML 如 何 影响 屏幕 阅读 器 用 户 的 体验 。 最 
好 将 屏幕 阅读 器 测试 列 入 你 的 日 常 开发 流程 。 
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可 以 在 CSS 选择 器 中 使 用 ARIA 角色 
属性 。 实 际 上 ， 通 过 使 用 恰当 的 地 标 角 色 ， 可 
以 将 id="content" 和 id-"sidebar" 属性 从 代码 
示例 中 移 除 ( 如 图 3.14.1 所 示 ) , 参见 第 11 章 。 


3.15 “为 元 素 指定 类 或 ID 名 称 


尽管 并 非 必需 ， 但 是 可 以 给 HTML 元 素 
分 配 唯 一 的 标识 符 ， 或 指定 其 属于 某 个 (或 某 
JLA ) 类 别 ， 也 可 以 同时 指定 标识 符 和 类 别 。 
然后 ， 就 可 以 对 具有 给 定 id 2X class 名 称 的 
元 素 添 加 样式 了 。 这 是 它们 最 常见 的 用 法 ,但 
并 非 唯 一 的 用 法 ( 参见 本 节 提 示 部 分 ) 。 


1. 为 元 素 添加 唯一 标识 符 的 方法 

在 元 素 的 开始 标记 中 输入 id" name", 
其 中 name 是 唯一 标识 该 元 素 的 名 称 ， 人 参见 
3.15.1, name 几乎 可 以 是 任何 字符 ， 只 要 
不 以 数字 开头 且 不 包含 空格 。 


2. 为 元 素 指定 类 别 的 方法 

在 元 素 的 开始 标记 中 输入 class="name " ， 
其 中 name 是 类 别 的 名 称 ， 参 见 图 3.15.1。 如 
果 要 指定 多 个 类 别 ， 用 空格 将 不 同 的 类 别名 
称 分 开 即 可 , 如 class="name anothername"( 可 
以 指定 两 个 以 上 的 类 别名 称 ) 。 






































HTML 文档 中 的 每 个 id 都 必须 是 唯 
一 的 。 换 和 名 话说， 一 个 页 面 里 不 能 出 现 两 个 
具有 相同 id 的 元 素 ， 并 且 每 个 元 素 都 只 能 
一 个 id。 相 同 的 id 可 以 出 现在 不 同 的 页 面 里 ， 
同一 id 也 不 一 定 每 次 都 赋予 同一 元 素 ， 尽 管 
这 是 惯常 的 做 法 。 





CD XFN 是 XHTML Friends Network ( XHTML 社交 网 络 ) 的 缩写 。 一 一 译 者 注 


相反 ， 一 个 class 名 称 可 以 分 配给 页 
面 中 任意 数量 的 元 素 ， 并 且 一 个 元 素 可 以 有 
一 个 以 上 的 class。 


class 属性 和 微 格 式 

认为 class 属性 只 能 为 一 组 元 素 应 用 
CSS 样式 是 一 种 常见 的 误解 。 事 实情 况 并 
非 如 此 ， 该 属性 也 可 以 在 不 引入 额外 元 素 
的 情况 下 增强 HTML 的 语义 。 

微 格式 就 可 以 做 到 这 一 点 。 微 格式 使 
用 约定 的 class 名 称 标 识 一 块 HIML， 如 
事件 或 基于 时 间 的 活动 (hCalendar 微 格 
式 ) ， 或 标识 人 人、 组织 和 公司 (hCard) ， 
或 描述 人 际 关系 (XFN?) 。 这 些 只 是 当前 
定义 的 众多 微 格式 中 的 少数 几 种 ， 而 更 多 
的 微 格式 还 在 生产 过 程 中 。 

应 用 程序 、 搜 索 机 器 人 和 其 他 软件 可 
以 理解 和 使 用 HTML 中 的 微 格式 。 例 如 ， 
Firefox 插件 Operator 可 以 将 任何 给 定 页 面 
的 微 格式 呈现 出 来 。 

关于 微 格式 的 使 有 用， 参见 http://microf- 


ormats.Org ; 
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«body» 


«div id="container"> 
«header» 
«nav role-"navigation"» 
«ul idz"toc"» 
<li><a href-"itgaudi"»Barcelona's Architect«/a»«/li» 
<li><a href-"itsagrada-familia" lang-"es"»La Sagrada Família«/a»«/li» 
<li><a href-"itpark-guell"»Park Guell«/a»«/li» 
</ul> 
</nav> 
</header> 





<article class="architect" role="main"> 
<h1 id="gaudi">Barcelona's Architect</h1> 


«p»Antoni Gaudí's incredible buildings bring millions of tourists to Barcelona each year.</p> 
«section class-"project"» 

«h2 id-z"sagrada-familia" lang-"es'»La Sagrada Família«/h2» 
«/section» 


«section class-"project"» 
«h2 id-"park-guell"»Park Guell«/h2» 


«/section» 
«/article» 
«/div» 
«/body» 
«/html» 

















3.15.1 ”为 元 素 添加 唯一 的 id 属性， 就 可 以 在 对 其 进行 格式 化 、 添 加 指向 该 元 素 的 链接 或 附加 
JavaScript 行为 的 时 候 标 识 该 元 素 。 为 一 个 或 多 个 元 素 添 加 class 属性 ， 就 可 以 对 所 有 这 类 元 素 统一 进行 
格式 化 ,例如 , architect 和 project 类 别 可 以 应 用 到 关于 其 他 建筑 师 的 内 容 , 从 而 为 它们 应 用 一 致 的 格式 。 
nav 中 的 链接 指向 hi 和 h2 中 的 id (关于 链接 ， 参 见 第 6 章 ) 。 其 他 的 id 是 为 格式 化 而 创建 的 。 关 于 id 
及 相关 的 示例 参见 3.13 15, id 和 class 属性 不 会 影响 元 素 的 外 观 ， 除 非 在 CSS 中 引用 它们 





















































class 和 id 属 性 可 以 添加 到 任何 元 素 。 关于 通过 id 或 class 为 元 素 添 加 样 
一 个 元 素 可 以 既 有 id 又 有 多 个 class, 式 ， 参 见 9.3 节 。 
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EED 不 管 你 打算 如 何 使 用 id 和 class， 
都 应 该 为 它们 选择 有 意义 的 ( 即 语义 化 的 ) 
Aiko 例如， 在 使 用 出 于 格式 化 目的 的 class 
时 ， 应 避免 使 用 描述 表现 样式 的 名 称 ， 如 
class="red"， 因 为 你 可 能 在 下 周 决 定 将 配色 方 
案 改 为 蓝 色 。 尽 管 在 CSS 中 对 分 配给 某 一 类 元 
素 的 颜色 进行 修改 是 相当 容易 的 ， 但 这 样 做 会 
导致 你 的 HTML 拥有 一 个 名 为 红色 却 实际 呈 
现 另 一 种 颜色 的 class, Eat, k% HTML 中 
所 有 的 class 通常 是 一 项 繁琐 的 工作 。 


考虑 为 元 素 选择 class 还 是 id 时 ， 
如 果 是 出 于 样式 化 目的 ， 则 通常 使 用 class, 
因为 这 样 就 可 以 使 用 同一 class 将 相同 的 样式 
应 用 到 其 他 元 素 。 不 过 ， 也 有 和 希望 直接 对 某 
个 元 素 ( 以 及 任何 可 能 的 后 代 ) 添加 样式 的 
时 候 ， 这 时 就 可 以 用 id。 


id 属性 会 自动 将 该 元 素 转 化 成 锚 ， 从 
而 可 以 创建 指 到 这 里 的 链接 。 详 细 解 释 参 见 
63 Y, 

可 以 使 用 class 属性 实现 微 格式 ( 参 


IL “class 属性 和 微 格 式 ” ) 。 


可 以 使 用 JavaScript 访问 id 和 class 
属性 ， 从 而 为 特定 的 元 素 添加 行为 。 


3.16 ”为 元 素 添加 title 属性 


可 以 使 用 title 属性 (不 要 与 title e 
混淆 ) 为 网 站 上 任何 部 分 加 上 提示 标签 
见 图 3.16.1 和 图 3.16.2。 不 过 ， iic 
提示 标签 。 屏 幕 阅 读 器 可 以 为 用 户 朗 读 title 
文本 ， 因 此 使 用 title 可 以 提升 可 访问 性 。 























«body» 
«header role-"banner"» 
«nav role-"navigation"» 
«ul id-"toc" title-"Table of 
Contents"; 
<li><a href-"itgaudi" title= 
>"Learn about Antoni 
— Gaudi"»Barcelona's 
 Architect«/a»«/li» 
<li><a href-"itsagrada-familia" 
> lang-'es"»La Sagrada Família 
^ «/a»x«/li» 
<li><a href-"itpark-guell"»Park 
 Guell«a»«/li» 
«/ul» 
«/nav» 
«/header» 


</body> 























</html> 
E 3.16.1 可 以 为 任何 元 素 添加 title， 不 过 用 的 
最 多 的 是 链接 










File Edt View History Bookmarks Tools Help Pe 





E Antoni Gaudí, Barcelona's architect x 





* Barcelona's Architect 
* La Sagrada Familia 


* Park Guell 
Barcelona's Architec xl 






3.46.2. "gi E t E BUR FE 9] JUL ER E B JG 
素 时 ， 就 会 显示 title, A 55 Barcelona’ s 
Architect 链接 ， 会 看 到 Learn about Antoni Gaudi， 
因为 该 链接 有 它 自身 的 title 属性 


在 网 页 中 为 元 素 添加 标签 

在 要 添加 title 标签 的 HTML 元 素 中 ， 
输入 title="1abe1"， 其 中 label 是 访问 者 将 
鼠标 移 到 这 个 元 素 上 时 希望 出 现在 提示 框 里 
的 文本 , 或 者 希望 由 屏幕 阅读 器 朗读 的 文本 。 
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旧版 本 的 Internet Explorer (IE7 及 之 
前 Hae) 还 会 将 img 元 素 (参见 第 5 章 ) 的 
alt 属性 作为 提示 框 的 文本 。 不 过 ， 如 果 img 
元 素 同 时 出 现 title 和 alt 属性 ， 则 提示 框 会 
采用 title 属性 的 内 容 ， 而 不 是 alt 属性 的 
内 容 。 


3.17 添加 注释 


可 以 在 HTML 文档 中 添加 注释 ， 标 明 区 
块 开始 和 结束 的 位 置 ， 提 醒 自 己 〈 或 未 来 的 
p) 某 段 代码 的 意图 ， 或 者 阻止 内 容 显 
示 出 来 等 ， 参 见 图 3.17.1。 这 些 注释 只 会 在 用 
文本 编辑 器 或 浏览 器 的 “查看 源 代 码 ” 选 项 
打开 文档 时 显示 出 来 。 访 问 者 在 浏览 器 中 是 
看 不 到 它们 的 ， 如 图 3.17.2 所 示 。 





NS 




















«body» 
€«l-- ssss 开始 文章 三 三 三 三 -==> 
«article class-"architect"» 
«hi id-"gaudi"»Barcelona's Architect«/hi» 


<1-- 这 一 段 不 会 显示 ， 因 为 它 被 注释 掉 了 


> year.«/p» 
--> 


— search for simplicity ...«/p» 


«section class-"project"» 


«/section» 


«section class-"project"» 
«h2 id-"park-guell'»Park Guell«/h2» 


«/section» 
«/article» 
<!-- 结束 文章 --> 





«p»Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each 


«p»Gaudí's non-conformity, already visible in his teenage years, coupled with his quiet 
— but firm devotion to the church, made a unique foundation for his thoughts and ideas. His 


«h2 id-"sagrada-familia" lang-'es"»La Sagrada Família«/h2» 


«1-- 
待 处 理事 项 : 在 页 面 上 线 之 前 添加 另 一 篇 关于 其 他 著名 建筑 的 文章 
--> 
«/body» 
«/html» 








图 3.17.1 








这 段 示例 代码 包括 四 个 注释 。 其 中 有 两 个 一 起 标记 了 文章 的 开始 和 结束 位 置 。 男 一 个 “注释 掉 ” 


了 第 一 段 ， 使 其 不 在 页 面 中 显示 出 来 《如 果 和 希望 永久 性 地 移 除 该 段 ， 最 好 在 HTML 中 将 它 删 掉 ) 。 最 后 一 























个 注释 用 以 提醒 制作 者 在 将 网 站 上 线 之 前 再 

















添加 一 些 内 容 。 要 确保 网 站 上 线 前 将 这 些 临时 注释 〈 如 “ 待 处 


理事 项 ” ) 移 除 ， 防 止 访问 者 查看 源 代码 时 看 到 它们 。 更 多 示例 参见 3.13 节 
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Antoni Gaudí, Barcelona's architect - Mozilla Freias 
Ele Edt Mew History Bookmarks Tols Help 


|! Antoni Gaudi, Barcelona's architect t 





















* Barcelona's Architect 


* La Sagrada Familia 
* Park Guell 


Barcelona's Architect 


Gaudi's non-conformity, already visible in his teenage years, coupled 
with his quiet but firm devotion to the church, made a unique 
foundation for his thoughts and ideas. His search for simplicity, based 
on his careful observations of nature are quite apparent in his work, 
from the Park Guell and its incredible sculptures and mosaics, to the 
Church of the Sacred Family and its organic, bulbous towers. 


La Sagrada Família 


E 3.17.2 注释 是 不 可 见 的 ( 尽管 在 查看 源 代码 时 
会 看 见 它们 )。 类 似 地 , 如 有 果 将 一 些 内 容 “注释 掉 ”， 
它们 也 不 会 显示 出 来 (参见 图 3.17.1 ) 。 代 码 里 包 
含 的 第 一 个 段落 在 这 里 并 没有 显示 








f£ HTML 了 页 面 中 添加 注释 的 步骤 
(1) Æ HTML 文档 中 希望 插入 注释 的 位 
A, 输入 <1--。 


(2) 输入 注释 。 
(3) 输入 --> 结束 注释 文本 。 
人 国 国 ”注释 很 适合 用 以 提醒 自己 (或 未 来 的 


编辑 者 ) 引入 、 移 除 
图 3.17.1。 


余 或 更 新 茶 些 区 块 ， 参 见 


fEE 国 注释 的 另 一 个 用 法 是 记录 版 本 号 。 


CES 在 主要 区 块 的 开头 和 结尾 处 添加 注释 
是 一 种 常见 的 做 法 ， 这 样 可 以 让 你 或 一 起 合 
TA A e 

笔者 喜欢 使 用 一 种 比 结束 注释 更 为 醒目 的 格 


式 编写 开始 注释 ， 从 而 更 容易 区 分 这 两 个 
位 置 。 
ED 在 发 布 网 站 之 前 ， 应 该 用 浏览 器 查看 


一 下 加 了 注释 的 页 面 。 这 样 能 帮 你 避免 由 于 
弄 错 注释 格式 导致 私人 化 的 注释 内 容 直 接 暴 
露 给 公众 访问 者 的 情况 。 


ED AAAA gehe 
管 通常 通过 浏览 器 访问 页 面 不 会 看 见 注释 内 
na ddr ida M 
能 看 见 它们 ， 如 果 用 户 将 网 页 保存 为 HTML 
源 代 码 ， 他 们 也 能 看 见 这 些 注 释 。 


EED 注释 不 能 谱 套 在 其 他 注释 里 
这 里 演示 的 注释 语法 仅 适 用 于 


HTML。CSS 和 JavaScript 的 注释 语法 与 此 并 

不 相同 。CSS 和 JavaScript 均 使 用 /* 注释 内 

容 */ 对 一 行 或 多 行进 行 注释 ， 此 外 JavaScript 
还 可 以 用 // 注释 内 容 进行 单行 注释 。 


X 本 








AXE 

口 开始 新 的 段落 

口 添加 作者 联系 信息 

a 创建 图 

口 指定 时 间 

OQ 标记 重要 或 强调 的 文本 
口 指明 引用 或 参考 

口 引述 文本 

口 突出 显示 文本 

口 解释 缩写 词 

O 定义 术语 

口 创建 上 标 和 下 标 

口 标注 编辑 和 不 准确 的 文本 
口 标记 代码 

口 使 用 预 格式 化 的 文本 
口 指定 细则 

a 创建 换行 

口 创建 span 

口 其 他 元 素 











除非 网 站 充满 视频 和 图 片 ， 否 则 网 页 
的 大 部 分 内 容 还 是 文本 。 本 章 将 说 明 针 对 不 
同 的 文本 类 型 ， 尤 其 是 (但 不 仅仅 是 ) 那些 
句子 或 短语 里 的 文本 ,应 该 选择 哪些 合适 的 
HTML 语义 化 元 素 。 











例如 ,em 元素 用 于 标识 强调 的 文本 ， 
cite 元 素 用 于 标识 对 艺术 作品 、 电 影 、 图 书 
等 内 容 的 引用 。 

浏览 需 通 常会 为 这 些 文 本 元 素 添 加 不 
同 的 样式 ， 以 区 别 于 普通 文本 。 例 如 ，em 
和 cite 元 素 中 的 文本 都 是 斜体 的 。 又 如 ， 
code 元 素 专 门 用 于 对 脚本 或 程序 中 的 代码 
进行 格式 化 ， 该 元 素 中 的 文本 默认 使 用 等 宽 
字体 。 

内 容 显 示 的 样子 与 为 其 使 用 的 标记 没 
有 关系 。 因 此 ， 不 应 该 为 了 让 文字 变 为 斜 
体 就 使 用 em 或 cite。 添 加 样式 是 CSS 的 
事情 。 

相反 ， 应 该 选择 能 描述 内 容 的 HTML 元 
素 。 如 果 浏 览 器 默认 添加 的 样式 与 你 想 用 
CSS 设置 的 样式 相同 ， 那 只 不 过 是 一 种 额外 
的 奖励 。 如 果 不 相 同 ， 直 接 自 己 编写 CSS E 
盖 默 认 样 式 就 可 以 了 。 


4.1 开始 新 的 段落 


HTML 会 忽略 你 在 文本 编辑 器 中 输入 的 
回 车 和 其 他 额外 的 空格 。 要 在 网 页 中 开始 一 
个 新 的 段落 ， 应 该 使 用 pp 元素， 参见 图 4.1.1 
和 图 4.1.2。 





























«body» 


«article» 
«hi»Antoni Gaudí«/hi» 
«p»Many tourists are drawn to 
> Barcelona to see Antoni Gaudi's 
» incredible architecture.«/p» 


<p>Barcelona celebrated the 150th 
— anniversary of Gaudí's birth in 
^ 2002.«/p» 


«h2»La Casa Milà«/h2» 

«p»Gaudí's work was essentially useful. 
><span lang-'"es"»La Casa Milà«/span» is 
>an apartment building and real people 
> live there.«/p» 


<h2>La Sagrada Família</h2> 
<p>The complicatedly named and curiously 
> unfinished Expiatory Temple of the 
* Sacred Family is the most visited 
— building in Barcelona.«/p» 
«article» 


«/body» 
</html> 




















4.1.1. 毫 不 奇怪 ，p 是 最 常用 到 的 HTML 2628 
之 一 





开始 新 段落 的 步骤 

(1) 输入 <p>。 

(2) 输入 新 段落 的 内 容 。 

(3) 输入 «/p» 结束 这 个 段落 。 


可 以 为 段落 添加 样式 ， 包 括 字体 、 字 
号 、 闫 色 等 。 详 细 内 容 参 见 第 10 章 。 


要 控制 行 间 距 ， 参见 10.6 节 。 要 控制 


段 后 间距 ， 参见 11.8 节 或 11.9 节 。 


可 以 通过 CSS 改变 段落 文本 的 对 齐 方 
式 ， 包 括 左 对 齐 、 右 对 齐 和 居中 对 齐 (参见 
10.13 $) 。 


Antoni Gaudí - Mozilla Firefox 


Eje Edt Mew History Bookmarks Tool Help 








| | Antoni Gaudi 





Antoni Gaudí 


Many tourists are drawn to Barcelona to see Antoni Gaudi's 
incredible architecture. 


Barcelona celebrated the 150th anniversary of Gaudi's birth in 2002 
La Casa Milà 


Gaudi's work was essentially useful. La Casa Milà is an apartment 
building and real people live there 


La Sagrada Família 


The complicatedly named and curiously unfinished Expiatory Temple 
ofthe Sacred Family is the most visited building in Barcelona. 





图 4.1.2 这 是 段落 通常 默认 的 呈现 方式 。 使 用 
CSS 可 以 控制 所 有 的 内 容 元 素 的 格式 


4.2 添加 作者 联系 信息 


你 或 许 以 为 address 元 素 是 用 于 标记 邮政 
地 址 的 , 但 其 实 并 非 如 此 (有 一 种 例外 的 情况 ， 
参见 提示 ) 。 实 际 上 ， 没 有 专门 用 于 标记 邮 
件 地 址 的 HTML 元 素 。 

TH, address 元 素 是 用 以 定义 与 HTML 
页 面 或 页 面 一 部 分 (如 一 篇 报告 或 新 文章 ) 
有 关 的 作者 、 相 关 人 士 或 组 织 的 联系 信息 ， 
通常 位 于 页 面 底部 或 相关 部 分 内 ， 参 见 图 
4.2.1 和 图 4.2.2。 


提供 作者 联系 信息 

(1) 如 果 要 为 一 个 article 提供 作者 联 
系 信息 ， 就 将 光标 放 在 该 元 素 内 。 如 果 要 提 
供 整 个 页 面 的 作者 联系 信息 ， 就 将 光标 放 
在 body 中 (更 常见 的 做 法 是 放 在 页 面 级 的 
footer 里 )。 

(2) 输入 «address», 

(3) 输入 作者 的 电子 邮件 地 址 、 指 向 联系 
信息 页 的 链接 等 。 
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(4) 输入 </address>。 





«body» 


«article» 
«hi»Museum Opens on the Waterfront«/hi» 
<p>The new art museum not only introduces 
— a range of contemporary works to the 
city, it's part of larger development 
effort on the waterfront. TE 
. [故事 内 容 的 其 余部 分 ] ， 


<l-- 文章 的 页 脚 ， 其 中 包 
—hezy 
«footer» 
<p>Tracey Wong has written for «cite» 
» The Paper of Papers«/cite» since 
— receiving her MFA in art history 
three years ago.«/p» 
«address» 
Email her at «a href-"mailto: 
» traceywGthepaperofpapers.com"» 
» traceywGthepaperofpapers.com 
> </a>. 
</address> 
</footer> 
</article> 


含 文章 的 地 址 信息 


《1-- 页 面 的 页 脚 ， 其 中 包含 整个 
Ps 
«footer» 
<p><small>&copy; 2011 The Paper of 
* Papers, Inc.«/small»«/p» 


页 面 的 地 址 信息 


<address> 

Have a question or comment about the 
> site? «a href="site-feedback.html"> 
— Contact our Web team«/a». 














«/address» 
«footer» 
«/body» 
</html> 
4.2.1 这 个 页 面 有 两 个 address 元 素 : 一 个 用 


T article 的 作者 , 另 一 个 位 于 页 面 级 的 footer B, 
用 于 整个 页 面 的 维护 者 。 注 意 article 的 address 
只 包含 联系 信息 。 尽 管 iar 的 footer 里 也 有 
关于 Tracey Wong 的 背景 信息 ， 但 这 些 信息 是 位 于 
address 元 素 外 面 的 












































Author Contact Info - Mozilla Firefow 





Ele Edt Mew History Bookmarks Tols Help 


f | Author Contact Info [* j - 


Museum Opens on the Waterfront 








The new art museum not only introduces a range of contemporary works 
to the city, it's part of larger development effort on the waterfront. 


[rest of story content] 


Tracey Wong has written for Tke Paper of Papers since receiving her 
MEA in Art History three years ago. 


Email her at traceywüDthepaperofpapers.com. 





© 2011 The Paper of Papers, Inc. 


Have a question or comment about the site? Contact our Web team, 





4.2.2 address 元 素 中 的 文字 默认 以 斜体 显示 Bo 


大 多 数 时 候 ， 联 系 信 息 的 形式 是 作者 
BESI S AER AGAR. 
联系 信息 也 有 可 能 是 作者 的 邮政 地 址 ， 这 时 
将 地 址 用 address 标记 就 是 有 效 的 。 但 是 用 
address 标记 公司 网 站 “联系 我 们 ”页 面 中 的 
办 公 地 点 ， 则 是 错误 的 用 法 。 


如 果 address S ££ article 里 ， 则 属 
于 其 所 在 的 最 近 的 article 元 素 的 祖先 ; 否则 
tn body. 说 明 整 个 页 面 的 作者 的 联系 
信息 时 ， 通 常 将 address 放 在 footer 元 素 里 。 


$m article 里 的 address 提 供 的 是 该 
article 作者 的 联系 信息 (参见 图 42.1) , 
不 是 上 误 套 在 该 article 里 的 其 他 任何 article 
( 如 用 户 评论 ) 的 作者 的 联系 信息 。 


JED address 只 能 包含 作者 的 联系 信息 ， 
不 能 包括 其 他 内 容 ， a 或 文章 的 最 后 修 
改 时 间 (参见 图 42.1) 。 此 外 ，HTML5 4 
jb Æ address 里 包含 以 下 元 素 : hi ~ h6、 
article, header, 


address, aside, footer, 


hgroup, nav 和 section, 
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关于 article 的 footer 元 素 ， 参 见 第 
3 章 。 


4.3 创建 图 


在 出 版 行业 , 图 和 文字 通常 是 相伴 出 现 的 。 
图 可 以 是 图 表 、 图 形 、 照 片 、 揪 图 、 代 码 片段 ， 
等 等 。 你 很 容易 在 报纸 、 杂 志 、 报 告 等 地 方 看 
到 它们 。 本 书 的 多 数 页 面 里 也 都 有 图 。 

在 HTML5 出 现 之 前 , 没有 专门 实现 这 个 
目的 的 元 素 ， 因 此 一 些 开发 人 员 想 出 了 他 们 
自己 的 解决 办 法 (通常 用 到 了 不 那么 理想 的 、 
没有 语义 的 div 元素) 。 通 过 引入 figure 和 
figcaption, HTML5 改变 了 这 种 情况 。 根 据 
EX, figure 指 的 是 由 文档 主要 内 容 引 用 的 
一 块 独立 的 内 容 (具有 可 选 的 标题 ) 参见 图 
4.3.1 和 图 4.3.2。 可 选 的 figcaption 是 figure 
的 标题 ， 出 现在 figure 内 容 的 开头 或 结尾 处 
(参见 4.3.1 ) 。 























创建 图 及 其 标题 的 步骤 

(1) fj X. «figure», 

(2) 作为 可 选 步 又 ， 输 入 «figcaption» JF 
始 图 的 标题 。 

(3) 输入 标题 文字 。 

(4) 如 果 在 第 (2)、(3) 步 创建 了 标题 ， 就 
输入 </figcaption>, 

(5) 通过 添加 图 像 、 视 频 、 数 据 表格 等 内 
容 的 代码 以 创建 图 。 

(6) 如 果 没 有 在 figure 内 容 之 前 包含 
figcaption， 则 可 以 在 内 容 之 后 重复 第 (2) ~ 
(4) 步 。 

(7) 输入 </figure>。 


EED 通常 , figure 是 引用 它 的 内 容 的 一 部 
分 ， 参 见 图 4.3.1， 但 它 也 可 以 位 于 页 面 的 其 
他 部 分 ， 或 位 于 其 他 页 面 ( 如 附录 ) 。 











«body» 
«article» 


«h1»2011 Revenue by Industry«/hi» 
es [报告 内 容 ] .…. 


«figure» 
«figcaption»Figure 3: 2011 Revenue 
— by Industry«/figcaption» 


«img src-"chart-revenue.png" 

— width-z"180" height-"143" alt= 

— "Revenue chart: Clothing 42%, 

— Toys 36%, Food 22%" /> 
«/figure» 


«p»As Figure 3 illustrates, ... </p> 


.… [更 多 报告 内 容 ] ... 
«/article» 


«/body» 
</html> 











4.3.1 XS figure 只 有 一 个 图 表 ， 不 过 放置 多 
个 图 像 或 其 他 类 型 的 内 容 〈 如 数据 表格 、 视 频 等 ) 
也 是 允许 的 。figcaption 元 素 并 不 是 必需 的 ， 但 如 
果 包 含 它 ， 它 就 必须 是 figure 元 素 里 的 第 一 个 或 
最 后 一 个 元 素 。figure 没有 默认 样式 ， 除 了 在 现 
代 浏 览 右 中 会 出 现在 新 的 一 行 








figure 元 素 可 以 包含 多 个 内 容 块 。 人 
如 ， 图 4.3.1 中 可 以 包含 两 个 图 表 : 一 个 表示 收 
入 ， 一 个 表示 利润 。 不 过 要 记 住 ， 不 管 figure 
里 有 多 少 内 容 ， 只 允许 有 一 个 figcaption, 


不 要 简单 地 将 figure 用 做 在 文本 中 
庶 入 独立 内 容 实 例 的 方法 。 这 种 情况 下 ， 通 
常 更 适合 用 aside AR (参见 3.11 节 )。 


在 HTML5 中 ，figure 元素 也 是 一 种 
区 块根 ， 这 意味 着 它 可 以 有 hl ~ h6 标题 ( 及 
其 自身 的 大 纲 ) ， 但 文档 大 纲 不 会 包含 这 些 
标题 。 这 与 分 块 内 容 是 不 一 样 的 ,参见 3.4 节 。 
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可 选 的 figcaption 必须 与 其 他 内 容 一 
起 包含 在 figure 里 面 ， 不 能 单独 出 现在 其 他 
位 置 。 


figcaption 中 的 文本 不 必 以 Figure3、 
Exhibit B 等 字样 开头 ， 一 段 对 内 容 的 简短 描 
述 即 可 ， 就 像 图 片 的 标题 一 样 。 


如 果 要 在 figure 中 包含 figcaption， 


它 必 须 是 figure 的 第 一 个 或 最 后 一 个 元 素 。 


Creating a Figure - Mozilla Firefox 
File Edit view History Bookmarks Tools Help 


Bd - 


2011 Revenue by Industry 








| Ae Creating a Figure 





. . . [report content] . . . 


Figure 3: 2011 Revenue by Industry 





As Figure 3 illustrates, . . . 


. . . [more report content] . . . 


4.3.2 ”这 个 包含 图 表 及 其 标题 的 figure 出 现在 
article 文本 中 间 。 很 容易 使 用 CSS 对 该 figure 
添加 样式 ， 例 如 为 它 添加 边框 ， 让 文字 环绕 在 它 
周围 





4.4 指定 时 间 
可 以 通过 time 元 素 标记 一 个 准确 的 时 间 





或 日 期 ， 这 是 HITMLS 新 增 的 元 素 。 COT 
日 期 体系 的 详细 说 明 ， 参 见 本 节 末 尾 “ 理 解 
datetime 格式 ”。 ) 

time 最 常见 的 一 种 用 法 是 表示 article 
元 素 的 发 布 日 期 。 要 表示 发 布 日 期 ， 需要 包 
含 pubdate 属性 。 包 含 pubdate 属性 的 time 
元 素 表 示 其 最 近 的 祖先 article 元 素 的 发 
布 日 期 (参见 图 4.4.1)。 还 可 以 用 time, 
datetime 和 pubdate 为 article 的 读者 评论 添 
加 时 间 戳 (假定 与 article 相关 的 评论 都 由 级 
套 在 这 个 article 中 的 article 元 素 包 着 ; 2 
见 3.9 节 “ 如 何在 article 和 section 中 作出 
选择 ”中 的 例 2 ) 。 

在 使 用 time 元 素 时 ， 可 以 用 多 种 方式 表 
示 时 间 (参见 图 4.4.1 和 图 4.4.3 ) 。time 中 
可 选 的 文本 内 容 (EN «time» 文本 </time> ) 
会 出 现在 屏幕 上 ， 作 为 可 选 的 、 机 器 可 读 的 
datetime 值 的 人 工 可 读 版 本 ( 参见 图 4.4.2 和 
图 4.4.4)。 

















<body> 


«article» 

«header» 
«hi»Cheetah and Gazelle Make Fast 
— Friends«/hi1» 
<p><time datetime-"2011-10-15" 
— pubdate-"pubdate"»October 15, 
 2011«/time»«/p» 

«/header» 


e [文章 内 容 ] .…. 
«article» 


«/body» 
«/html» 











4.4.14 datetime 属性 和 time 元 素 中 的 文本 最 好 
反映 相同 的 日 期 ， 但 它们 在 书写 方式 上 可 以 不 一 样 
(更 多 例子 见 图 4.4.3) 。 这 个 time 元 素 代表 文章 
发 布 的 日 期 ， 因 为 它 包含 了 pubdate 属性 




















J) Specifying Time - Mozilla Firelfos 
File Edit View History Bookmarks Tools Help 





Alpi xl 





| L | Specifying Time 





Cheetah and Gazelle Make 
Fast Friends 


October 15, 2011 


.. [article content] . . . 





























图 4.4.2 article 的 发 布 日 期 出 现在 标题 下 面 。 
显示 出 来 的 是 time 元 素 的 文本 内 容 ， 而 不 是 
datetime {È 


指定 准确 时 间 和 日 期 

(1) 输入 <time 开始 time 元 素 。 

(2) 如 果 需 要 ,输入 datetime-"time", 其 
中 time 应 使 用 合法 的 格式 (参见 本 节 末 尾 “ 理 
解 datetime 格式 ” 

(3) 如 果 这 个 时 间 代 表 的 是 article 或 整 
个 页 面 的 发 布 日 期 ， 则 输入 pubdate-"pubd- 
ate" 或 pubdate。 

(4) 输入 > 结束 这 个 开始 标记 。 

(5) 如 果 要 让 时 间 显 示 在 浏览 需 中 ， 则 输 
入 反映 时 间或 日 期 的 文本 (关于 允许 的 格式 ， 
参见 第 一 条 提示 ) 。 
(6) 输入 </time>。 


如 果 和 忽略 datetime 属性 ， 文 本 内 容 
就 必须 是 合法 的 日 期 或 时 间 格 式 。 也 就 是 说 ， 

图 4.4.3 第 一 个 例子 不 能 写成 *p>The train 
arrives at «time»8:45 a.m.«/time» and 








«time»4:20 p.m.«/time» on «time»October 4th, 
2012«/time».«/p», wR EAT datetime, 文本 
内 容 就 可 以 按 你 希望 的 任何 形式 表示 日 期 或 
时 间 了 ， 就 像 图 4.4.3 中 第 二 个 和 第 三 个 例子 
那样 。 


不 要 在 time 中 使 用 不 准确 的 日 期 或 
Bp), 如 “20 世纪 中 期 ” 、“ 午 夜 过 后 ”、“ 文 
艺 复 兴 后 期 ”或 “上 周 早 些 时 候 ”。 


fEE 国 如 果 要 在 页 面 中 显示 time 元 素 ， 应 该 
在 该 元 素 中 包含 时 间 和 日 期 的 文本 版 本 。 如 果 
没有 包含 ， 浏 览 器 理应 根据 datetime 值 显示 对 
应 的 文本 ,但 在 本 书写 作 之 际 ， 浏览 器 对 这 一 
特性 的 支持 程度 还 很 低 ， 参 见 图 4.4.4。 





<body> 


<p>The train arrives at «time»08:45«/time» 
— and «time»16:20«/time» on 
— «time»2012-04-10«/time».«/p» 


«p»We began our descent from the peak of 

— Everest on «time datetimez"1952-06-12T11: 
— 05:00"5»June 12, 1952 at 11:05 a.m. 

^ «/ttime»«/p» 


«p»They made their dinner reservation 
— for «time datetime-"2011-09-20T18: 
— 30:00"»tonight at 6:30«/time».«/p» 


<p>The record release party is on «time 
— datetimez"2011-12-09"»«/time».«/p» 


«/body» 
«/html» 











44.3 使 用 time 元 素 有 多 种 方式 。 最 简单 的 形式 
(第 一 个 例子 ) 没有 datetime 属性 。 忽 略 datetime 
属性 时 ， 必 须 使 用 合法 的 格式 表示 日 期 和 时 间 。 头 
三 个 例子 在 time 元 素 里 都 包含 了 时 间或 日 期 的 文 
本 ， 这 些 文字 会 显示 在 屏幕 上 (人 参见 图 4.44) 。 
建议 始终 包含 这 种 人 类 可 读 的 时 间 ， 因 为 当前 的 浏 
览 需 不 会 显示 属性 中 的 值 (参见 图 4.4.2 ) 
































如 果 使 用 带 pubdate 的 time 元素 指 
T article 的 发 布 日 期 通常 将 它 放置 在 这 个 
article 的 header 或 footer 元 素 里 ， 尽 管 这 
不 是 必需 的 。 不 管 怎样 ， 一定 要 把 它 谈 套 在 
相关 的 article 里 面 的 某 个 位 置 。 
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Specifying Time - Mozilla Firefos Ief] x| 


File Edit View History Bookmarks Tools Help 
a Specifying Time EE 7 





The train arrives at 08:45 and 16:20 on 
2012-10-04. 


We began our descent from the peak of 
Everest on June 12, 1952 at 11:05 a.m. 


They made their dinner reservation for tonight 
at 6:30. 


The record release party is on . 











4.4.4 头 三 个 段落 会 : 
(参见 最 后 一 条 提示 ) 


示 时 间 ， 最 后 一 个 不 会 


理解 datetime 格式 


如 果 带 pubdate 属性 的 time 元 素 的 祖 
APRA article 元 素 ， 则 代表 整个 页 面 的 发 
布 时 间 。 


既 可 以 用 <time pubdate»«/time», 
也 可 以 用 «time pubdatez"pubdate"»«/time» 
指定 pubdate, Fit, 一旦 包含 它 ， 就 必须 提供 
datetime 或 时 间 的 文本 内 容 (参见 图 4.4.1 ) 。 


datetime 属性 的 机 器 可 读 格 式 ( 参见 
本 节 末 尾 “ 理 解 datetime 格式 ”) 使 Web 应 
用 之 间 可 以 同步 日 期 和 时 间 。 不 过 在 本 书写 
作 之 际 , 还 没有 浏览 器 会 显示 datetime 值 ( 参 
见 图 4.4.2 和 图 4.4.4) 。 


不 能 在 time AA FRA A — A time 
元 素 。 


time 元 素 的 时 间 是 以 24 小 时 制 为 基础 的 ， 也 可 以 通过 相对 UTC (Coordinated Universal 
Time， 全 球 标准 时 间 ) 时 差 的 方式 来 表示 。datetime 属性 应 提供 机 器 可 读 的 日 期 和 时 间 格 式 ， 


其 简化 形式 为 : 
YYYY-MM-DDThh :mm:ss 
例如 (当地 时 间 ) : 
2011-11-03T17:19:10 


示 “ 当 地 时 间 2011 年 11 月 3 日 下 午 5 时 19 分 10 秒 ”。T 用 于 将 日 期 CYYYY-MM-DD ) 
和 时 间 (hh:mm:ss ) 隔 开 。 如 果 包 含 时 间 ， 秒 是 可 选 的 。 也 可 以 使 用 hh:mm.sss 格式 提供 时 间 


的 党 秒 数 。 注 意 毫 秒 数 之 前 的 符号 是 一 个 点 。 


如 果 你 愿意 ， 也 可 以 表示 为 世界 时 。 在 末尾 加 上 字母 2， 就 成 了 UTC。 


例如 (世界 时 ) : 
2011-11-03T17:19:10Z 


也 可 以 通过 相对 UTC Hp E49 ACGEGRHIBED. GXHIROECEGRZ, 写 上 - ( 减 ) 或 +( 加 ) 


及 时 差 即 可 。 
例如 (人 钨 相 对 UTC 时 差 的 世界 时 ) : 
2011-11-03T17:19:10-03:30 
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表示 “ 纽 芬兰 标准 时 (上 比 UTC 晚 3 个 半 小 时 )2011 年 11 月 3 日 下 午 5 时 19 分 


0 秒 ” 


UTC 时 区 列表 参见 http://en.wikipedia.org/wiki/List of time zones by UTC offset。 
如 果 确 实 要 包含 datetime， 也 不 必 像 图 4.4.3 中 的 示例 那样 提供 时 间 的 完整 信息 。 从 技术 
上 来 说 , time 元 素 中 的 日 期 是 以 公历 为 基础 的 (公历 是 当前 广泛 使 用 的 国际 公认 的 日 历 体系 )。 


因此 ，HTMLS5 不 推荐 使 用 该 元 素 表 示 现 行 公 历 开 始 使 用 之 前 的 日 期 (一般 


你 的 内 容 带 来 影响 ， 你 只 需要 知道 这 一 点 
个 复杂 的 主题 。 更 多 信息 和 实例 参见 
html ; B 些 问题 


time saf.html。 


4.5 标记 重要 或 强调 的 文本 


strong 元 素 表 示 重 要 的 文本 ， 而 em 则 表示 
强调 。 根 据 内 容 需要 ， 这 两 个 元 素 既 可 以 单独 使 
用 ， 也 可 以 一 起 使 用 ， 人 参见 图 45.1 和 图 4.5.2。 














«body» 


«p»«strong»Warning: Do not approach the 

— zombies «em»under any circumstances«/em». 
— </strong> They may «em»look«/em» 

— friendly, but that's just because they want 
— to eat your arm.«/p» 


«/body» 
«/html» 











图 4.5.1 第 一 个 句子 既 有 strong 又 有 em， 而 第 二 
个 句子 只 有 em。 如 果 将 <em>under any circumstances 
</em> 改 为 《strong>under any circumstances«/strong» 


它 的 重要 程度 会 比 strong 包含 的 文本 更 高 
1. 标记 重要 文本 
(1) 输入 <strong>。 


(2) 输入 想 标 记 为 重要 内 容 的 文本 。 
(3) 输入 </strong>。 


2. 强调 文本 
(1) 输入 <em>。 
(2) 输入 想 强 调 的 文本 。 








般 情况 下 这 不 会 给 


就 行 了 ) 。 有 很 多 关于 这 种 限制 的 讨论 ， 但 这 是 一 
JL http://dev.w3.org/html5/spec-author-view/the-time-element. 


页 的 详细 说 明 ， 参 见 www.quirksmode.org/blog/archives/2009/04/making 





PAN 
(3) 输入 </em>。 
Importance and Emphasis - Mozilla Firefese T [p x| 
File Edi View History Bookmarks Tools Help 
| |_ | Importance and Emphasis | T x 





Waming: Do not approach the zombies under any 
circumstances. They may look friendly, but that's just 
because they want to eat your arm. 








4.5.2 浏览 器 通常 将 strong 文本 以 粗 体 显示 ， 
将 em 文本 以 斜体 显示 。 如 果 em strong 的 子 元 








K (如 图 4.5.1 中 第 一 个 句子 ) ， 文 本 将 同时 以 斜 
体 和 粗 体 显示 
CES 不 要 使 用 b 元 素 代替 strong， 也 不 要 使 


用 并 元 素 代 替 em。 尽管 它们 在 浏览 器 中 显示 的 
样式 是 一 样 的 ， 但 它们 的 含义 却 很 不 一 样 ( 参见 
AGE "HIMLS 中 重新 定义 的 b 和 iL 元 素 ”) 。 


可 以 在 标记 为 strong 的 短语 中 再 网 套 
strong 文本 。 如 果 这 样 做 ， 作 为 另 一 个 strong 
的 子 元 素 的 strong 文本 的 重要 程度 都 会 递增 。 
这 种 规则 对 吝 套 在 另 一 个 em 里 的 em 文本 也 适 
用 。 例 如， 在 语句 <p><strong>Remember that 
entries are «strong»due by November 17th«/ 
strong».«/strong»«/p» P, due by November 
17th 要 比 其 他 strong 文本 更 为 重要 。 
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ED 可 以 用 CSS 将 任何 文本 变 为 粗 体 或 斜 
体 ， 也 可 以 履 盖 strong 和 em 等 元 素 的 浏览 器 
默认 样式 ， 参 见 图 4.5.2。 更 多 细节 参见 10.3 
节 和 10.4 节 。 


HTMLS5 中 重新 定义 的 b 和 i 元 素 

HTMLS 强调 元 素 的 语义 ， 而 非 表 现 。b 和 元 素 是 早期 HTML 遗留 下 来 的 产物 ， 它 们 
分 别 用 于 将 文本 交 为 粗 体 和 斜体 ( 那 时 CSS 还 未 出 现 ) o HTML 4 fe XHTML 1 当然 抛弃 了 
它们 ， 因 为 它们 本 质 上 是 用 于 表现 的 。 当 时 的 规范 建议 编码 人 员 用 strong 替代 b， 用 em 替代 
i, 不过， 事实 证 明 ，em 和 strong 并 不 总 是 在 语义 上 合适 。 为 此 ，HTML5 重新 定义 了 b fei, 

传统 出 版 业 里 的 某 些 排版 规则 在 现 有 的 HTML 语义 还 找 不 到 对 应 物 ， 其 中 就 包括 用 斜 
体 表示 某 些 科学 名 称 (如 马萨诸塞 州 州 树 Ulmus americana ) 、 具 体 的 交通 工具 名 称 ( 如 Orient 
Express ) 及 外 来 语 ( 如 joie de vivre ) 。 这 些 词语 不 是 为 了 强调 而 加 上 和 斜体 的 ， 只 是 样式 上 的 惯例 。 

为 了 应 对 这 些 情况 ，HTML5 没有 创建 一 些 新 的 语义 化 元 素 ( 进一步 把 事情 搞 复 杂 ) ， 而 
是 采取 了 一 种 很 实际 的 做 法 ， 直 接 利 用 现 有 元 素 : em 用 于 所 有 层次 的 强调 ，strong 用 于 表示 
重要 性 ,而 b 和 i 二 则 用 于 其 他 的 情况 。 

这 意味 着 , 尽管 b 和 并 不 包含 任何 明显 的 语义 ,但 读者 仍 能 发 现 它们 与 周边 文字 的 差别 。 
而 且 你 还 可 以 通过 CSS 改变 它们 粗 体 或 斜体 的 样式 。 HTMLS 强调 , b 和 i 应 该 是 其 他 元 素 ( 如 
strong、em、cite 等 ) 都 不 适用 时 的 最 后 选择 。 


b 元 素 简 介 

HTMLS 将 b 重新 定义 为 : 
b 元 素 表示 出 于 实用 的 目的 提醒 读者 注意 的 一 块 文字 ， 不 传达 任何 额外 的 重要 

性 ， 也 不 表示 其 他 的 语 态 和 语气 ， 用 于 如 文档 摘要 里 的 关键 词 、 评 论 里 的 产品 名 、 
基于 文本 的 交互 式 软件 中 指示 操作 的 文字 、 文 章 导 语 等 。 
例如 : 
<p>The <b>XR-5</b>, also dubbed the «b»Extreme Robot 5«/b», is the best robot we've ever 
— tested.«/p» 


b 元 素 默 认 显示 为 粗 体 。 
i 元 素 简介 
HTMLS 将 工 重 新 定义 为 : 
i 元素 表示 一 块 不 同 于 其 他 文字 的 文字 ， 其 有 不 同 的 语 态 或 语气 ,或 其 他 不 同 于 常 
规 之 处 , 用 于 如 分 类 名 称 、 技 术 术 语 、 外 语 里 的 惯用 语 、 思 想 、 西 方 文字 中 的 船舶 名 称 等 。 
例如 : 
<p>The «i lang="la">Ulmus americana«/i» is the Massachusetts state tree.«/p» 


<p>The «i»Orient Express«/i» began service in 1883.«p» 
<p>The couple exhibited a «i langz"fr"»joie de vivre«/i» that was infectious.«p» 


iU SUA Xo HE. 









































74 第 4 章 X 本 





4.6 指明 引用 或 参考 


使 用 cite 元 素 可 以 指明 对 某 内 容 源 的 引 
用 或 参考 。 例 如 ， 戏 剧 、 脚 本 或 图 书 的 标题 ， 
歌曲 、 电 影 、 照 片 或 雕塑 的 名 称 ， 演 唱 会 怠 
音乐 会 规范、 报纸 或 法 律 文件 ， 等 等 ， 参 
见 图 4.6.1 和 图 4.6.2。 








<p>He listened to <cite>Abbey Road</cite> 
— while watching <cite>A Hard Day's Night 
— «/cite» and reading «cite»The Beatles 
—> Anthology«/cite». 


<p>When he went to The Louvre, he learned 

— that «cite»Mona Lisa«/cite» is also known 
—as «cite lang-"it"»La Gioconda«/cite».«/ 
p» 




















图 4.6.1 cite 元 素 适 用 于 标记 艺术 作品 、 音 乐 、 
包 影 和 图 书 等 的 标题 


























HTML5 与 使 用 cite 元 素 表示 名 称 


Indicating a Citation - Mozilla Firefox 





File Edit View History Bookmarks Tools Help 





| | Indicating a Citation ti be 





He listened to Abbey Road while watching A Hard 
Day's Might and reading The Beatles Anthology. 


When he went to The Louvre, he learned that 
Mona Lisa is also known as La Gioconda. 





4.6.2 


cite 元 素 默认 以 斜体 呈现 


引用 参考 的 步骤 


(1) 输 入 «cite», 

Q) 输入 参考 的 名 称 。 

BG) 输入 </cite>。 
对 于 要 从 引用 来 源 中 引述 内 容 的 情 
况 ， paie 或 q 元 素 标记 引述 的 文 
本 (参见 4.7 节 ) 。 要 和 弄 清 楚 的 是 ，cite 只 
用 于 参考 源 本 身 ， PR ae 的 内 容 。 


HTMLS 声明 , 不 应 使 用 cite 作为 对 人 名 的 引用 (这 是 开发 社区 众多 意见 分 歧 中 的 一 个 ) ， 
但 HTML 以 前 的 版 本 允许 这 样 做 ， 而且 很 多 设计 和 开发 人 员 仍 在 这 样 做 。 
HTML 4 的 规范 有 以 下 例子 ( 已 将 元 素 名 称 由 大 写字 母 改 为 小 写 ) : 


As <cite>Harry S. Truman«/cite» said, 
<q lang-'en-us'"»The buck stops here.«/q» 


除了 这 些 例子 ， 有 的 网 站 经 
( WordPress 默认 模板 就 是 这 样 做 的 ) 。 
很 多 开发 人 员 表 示 他 们 将 继续 


对 与 页 面 中 的 引文 有 关 的 名 称 使 用 cite， 


经 常用 cite 标记 在 博客 和 文章 中 发 表 评 论 的 访问 者 的 名 字 


因为 HTML5 没 


有 提供 其 他 他 们 认为 可 接受 的 元 素 ( 即 span fe b ZK ) o Jeremy Keith 提供 了 一 个 很 好 的 例子 ， 


JL http://24ways.org/2009/incite-a-riot/。 


4.7 引述 文本 


有 两 个 特殊 的 元 素 用 以 标记 引述 的 文本 。 
blockquote 元 素 表示 单独 存在 的 引述 (通常 
更 长 ， 但 不 一 定 这 样 ) ， 参 见 图 4.7.1， 默 认 





显示 在 新 的 一 行 ， 
用 于 短 的 引述 
见 图 4.7.3。 


参见 图 4.7.2。 而 q 元 素 则 
， 像 那些 句子 里 面 的 引述 ， 参 
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«body» 


«p»He enjoyed this selection from «cite»The 
— Adventures of Huckleberry Finn«/cite» by 
Mark Twain:«/p» 


«blockquote cite-"http://www.marktwain 
— books.edu/the-adventures-of-huckleberry 
> -finn/"» 

<p>We said there warn't no home like a 

— raft, after all. Other places do seem 

— so cramped up and smothery, but a 

— raft don't. You feel mighty free and 

— easy and comfortable on a raft.«/p» 
«/blockquote» 


<p>It reminded him of his own youth exploring 
— the county by river.«/p» 











«/body» 
</html> 
E] 4.7.1 根据 需要 ，blockquote 可 长 可 短 。 可 以 


包含 cite 属性 (不 要 与 第 一 段 中 出 现 的 cite 元 素 
混淆 ) 提供 引述 文本 的 位 置 。 不 过 ,浏览 带 不 会 显 
示 cite 属性 中 的 内 容 ， 参 见 图 4.7.2〈 要 了 解 推荐 
的 做 法 ， 参 见 第 二 条 提示 ) 




















Quoting Text - Mozilla Firefox 


File Edit View History Bookmarks Tools Help 4 
| _| Quoting Text T * 








He enjoyed this selection from The Adventures of 
Huckleberry Finn by Mark Twain: 


We said there warn't no home like a raft, after all. 
Other places do seem so cramped up and 
smothery, but a raft don't. You feel mighty free and 
easy and comfortable on a raft. 


It reminded him of his own youth exploring the county by river 





4.7.2 ”浏览 器 默认 对 blockquote 文本 进行 缩 进 。 





截至 目前 , 还 没有 浏览 器 会 显示 cite 属性 的 值 (要 
了 解 推荐 的 做 法 ， 参 见 第 二 条 提示 ) 。 但 所 有 的 浏 
览 器 都 支持 cite 元 素 ， 通 常 对 其 中 的 文本 以 斜体 
显示 ， 如 图 所 示 。 所 有 这 些 默认 样式 都 可 以 被 CSS 
ux 























«body» 


«p»And then she said, «q»Have you read 
— Barbara Kingsolver's «cite»High Tide in 
— Tucson«/cite»? It's inspiring.«/q»«/p» 


<p>She tried again, this time in French: 
—^«q lang-"fr"»Avez-vous lu le livre 

— «citeHigh Tide in Tucson«/cite» de 

— Kingsolver? C'est inspirational.«/q»«/p» 


«/body» 
</html> 

















图 4.7.3 如果 引述 文本 的 语言 与 页 面 默认 语言 ( 通 
过 html 元 素 的 lang 属性 指定 ) 不 同 ， 就 在 q 元 素 
中 加 上 lang 属性 

浏览 器 应 对 q 元 素 中 的 文本 自动 加 上 特 
定语 言 的 引号 ， 但 Internet Explorer 直到 IES 
才 开 始 文 持 这 一 特性 。 还 有 的 浏览 器 在 处 理 
可 套 的 引述 时 存在 一 些 问题 。 一 定 要 阅读 本 
节 提 示 ， 了 解 q 元 素 的 殖 代 方法 。 


1. 引述 块 级 文本 的 步骤 

(1) 输入 <blockquote 开 始 一 个 块 级 引述 。 

D 如 果 需 要 ， 输 入 cite-"url", Hp 
url 为 引述 来 源 的 地 址 。 

(3) 输入 > 以 结束 开始 标记 。 

(4) 输入 希望 引述 的 文本 ， 并 用 上 段落 等 适 
当 的 元 素 包 围 。 

(5) 输入 </blockquote>。 



































2. 引述 行内 文本 的 步骤 

(1) 输入 <q 开始 引述 字 词 或 短语 。 

(2) 如 果 需 要 ， 输 入 cite="wr1"， 其 中 
url 为 引述 来 源 的 地 址 。 

(3) 如 果 引 述 内 容 的 语言 与 页 面 默 认 语 言 
(通过 html 元 素 的 lang 属性 指定 ) 不 同 ， 输 
A lang="xx"， 其 中 xx 是 引述 内 容 语言 的 两 
个 字母 的 代码 。 这 个 代码 用 于 判断 需要 使 用 
的 引号 的 类 型 ( 英语 为 “”， 而 很 多 欧洲 语 
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言 则 为 x» ) ， 但 浏览 器 对 引号 的 呈现 方式 可 
能 不 同 。 

(4) 输入 > 以 结束 开始 标记 。 

(5) 输入 要 引述 的 文本 。 

(6) 输入 </q>。 


尽管 这 样 做 也 是 允许 的 ， 但 应 避免 将 
文本 直接 放 在 blockquote 开始 和 结束 标记 之 
间 。 应 该 将 文本 放 在 blockquote 中 p 或 其 他 
语义 上 适合 的 元 素 中 。 


可 以 对 blockquote 和 qq 使 用 可 选 的 
cite 属性 ， 提 供 引 述 内 容 来 源 的 URL。 不 幸 
的 是 ， 浏 览 器 通常 不 会 将 cite 的 URL 呈现 
给 用 户 ， 参 见 图 4.7.2， 因 此 这 个 属性 本 身 不 
是 特别 有 用 。 因 此 , 建议 在 内 容 中 使 用 链接 (a 
元 素 ) 重 复 这 个 URL, 让 访问 者 可 以 查看 来 源 。 
也 可 以 使 用 JavaScript 将 cite 的 值 暴露 出 来 ， 
但 这 样 做 的 效果 稍 差 一 些 。 


blockquote 元 素 是 HTMLS 的 区 块根 ， 
这 意味 着 它 可 以 有 hl ~ h6 标题 (及 其 自身 
的 大 纲 ) ， 但 文档 大 纲 不 会 包含 这 些 标题 。 
这 与 分 块 内 容 是 不 一 样 的 ， 参 见 3.4 节 。 


SEE q 元 素 引 用 的 内 容 不 能 跨越 不 同 的 段落 。 
CES 不 有 要 仅仅 因为 需要 在 字 词 两 端 添加 引 


号 就 使 用 q。 例如 ，<p>Every time I hear the 
word «q»soy«/q», I jump for joy.«/p» 是 不 
正确 的 ， 因 为 soy 并 不 是 对 某 参 考 源 的 引用 。 


blockquote 和 qq 元素 可 以 说 套 , 例如 ， 
<p>The short story began, <q>When she 
was a child, she would say, «q»Howdy, 


stranger!«/q» to everyone she passed.«/ 
q></p>。 谈 套 的 q 元 素 应 该 自动 如 上 正确 的 引 
用 ( 在 英语 中 外 面 的 是 双 引 号 ， 里 面 的 是 单 
引号 ) ， 但 浏览 器 的 支持 程度 并 不 相同 。 由 
于 内 外 引号 在 不 同 语言 中 的 处 理 方式 是 不 一 
样 的 ， 因 此 要 根据 需要 在 9 元素 中 加 上 lang 
属性 (参见 图 4.7.3 和 图 4.7.4) 。 


由 于 q 元 素 的 跨 浏览 器 问题 (参见 
图 4.7.4) ， 很 多 (可 能 是 大 多 数 ) 开发 人 
员 避 免 使 用 q 元 素 ， 而 是 选择 直接 输入 正确 
的 引号 或 使 用 字符 实体 。Oli Studholme 在 
HTMLS Doctor 上 发 表 的 文章 “Quoting and 
citing with «blockquote», <q>, «cite», and 
the cite attribute” 深 入 分 析 了 这 一 话题 ， 还 提 
供 了 一 些 为 q 元 素 添加 引号 样式 的 方法 和 相 
关 的 浏览 器 支持 信息 (http://html5doctor.com/ 
blockquote-q-cite/ ) 。 


Quoting Text - Mozilla firefox = [e xj 


File Edt View History Bookmarks Tools Help 
| L] Quoting Text + E 








And then she said, "Have you read Barbara 
Kingsolver's High Tide in Tucson? It's inspiring." 


She tried again, this time in French: " Avez-vous lu le 
livre High Tide in Tucson de Kingsolver? C'est 
inspirational." 








图 4.7.4 浏览 器 应 该 自动 在 q 元 素 周围 加 上 双 引 
I ksh, MEREKA q 元 素 周围 加 上 单 引 号 ) 。 
如 图 所 示 ，Firefox 是 这 样 做 的 ， 但 并 非 所 有 的 浏 
览 絮 都 支持 ( 例如 旧版 本 的 Internet Explorer ) 


4.8 突出 显示 文本 


我 们 都 在 某 些 时 候 用 过 交 光 笔 一 一 也 许 
是 在 复习 考试 ， 抑 或 是 在 审查 合同 。 无 论 是 
哪 种 情况 ， 诡 光 笔 标记 的 都 是 一 些 与 任务 有 
关 的 关键 字 词 。 
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HTML5 通过 新 的 mark 元 素 复 制 这 一 过 
程 。 试 着 将 mark 想 成 灾 光 笔 的 语义 化 对 照 物 。 
换 句 话说 , 重要 的 是 对 特定 的 词语 进行 标注 ， 
与 它们 如 何 显示 无 关 。 可 以 用 CSS 对 mark 元 
素 里 的 文字 应 用 样式 (或 者 不 应 用 任何 样式 )， 
但 应 仅 在 合适 的 情况 下 使 用 该 元 素 。 


























<body> 


«p»So, I went back and read the instructions 
— myself to see what I'd done wrong. They 
— said:</p> 


«blockquote» 
<p>Remove the tray from the box. Pierce 
— the overwrap several times with a 
— fork and cook on High for «mark»15 
— minutes«/mark», rotating it half way 
—> through.«/p» 

«/blockquote» 


<p>I thought he'd told me «em»fifty«/em». No 
— wonder it exploded in my microwave.«/p» 




















«/body» 
«/html» 
4.8.4 尽管 mark 最 常见 的 使 用 场合 是 在 搜索 














结果 页 面 ， 这 里 给 出 了 男 一 种 合理 的 用 法 。15 
minutes 一 词 在 包装 上 的 说 明 中 没有 被 突出 显示 ， 
但 这 个 HTML 的 作者 却 使 用 mark 将 该 词 进行 突出 
显示 ,支撑 所 叙述 的 故事 。 浏 览 器 对 mark 文本 的 
呈现 样式 存在 差异 (参见 图 4.8.2 ) 
无 论 何 时 使 用 mark， 该 元 素 总 是 用 于 提 
起 读者 对 特定 文本 片段 的 注意 。 下 面 是 一 些 
应 用 的 例子 。 
口 对 搜索 结果 页 面 或 文章 中 的 搜索 词 进 
行 突出 显示 。 人 们 讨论 mark 时 ， 这 
是 最 常见 的 应 用 场景 。 假 设 使 用 网 
站 的 搜索 功能 查找 “solar panels”。 
搜索 结果 或 每 个 结果 文章 可 以 使 用 
«mark»solar panels</mark>， 从 而 在 
整 篇 文字 中 突出 显示 该 词 。 
























































口 对 于 某 段 引述 ， 如 果 作 者 在 原来 的 格 
式 中 没有 对 其 进行 突出 显示 ， 可 以 用 
mark 引起 对 它 的 注意 (参见 图 4.8.1 和 


图 4.8.2) 。 
口 引起 对 代码 片段 的 注意 (参见 图 4.8.3 
和 图 4.8.4) 。 
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So, I went back and read the instructions myself to see 
what I' d done wrong. They said: 


Remove the tray from the box. Pierce the 
overwrap several times with a fork and 
cook on High for 15 minutes, rotating it 
half way through. 


I thought he'd told me fif£y. No wonder it exploded in 
my microwave. 





4.8.2 Xf mark EE Sc FI D] Vo e OSA SR B 
文字 默认 加 上 黄色 背景 。 旧 的 浏览 器 不 会 这 样 做 ， 
但 通过 一 条 简单 的 样式 表 规 则 就 可 以 让 它们 实现 这 
种 效果 ( 参见 提示 ) 











«body» 


«p»It's bad practice to use a class name that 
— describes how an element should look, such 
— as the highlighted portion of CSS below: 
«pre» 

«code» 

«mark».greenText«/mark» { 

color: green; 
} 


«/code» 
«/pre» 


«/body» 
«/html» 

















4.8.3 ”这 个 例子 使 用 mark 引起 对 代码 片段 的 


注音 
VES 











Je 
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It's bad practice to use a class name that 
describes how an element should look, such as 
the highlighted portion of CSS below: 


-greenText | 
color: green; 
H 











mark 标记 的 代码 被 突出 显示 了 


4.8.4 











突出 显示 文本 的 步骤 

(1) 输入 <mark>。 

(2) 输入 希望 引起 注意 的 字 词 。 
(3) 输入 </mark>。 


mark 元 素 与 em( 表 示 强 调 ) 或 
strong (表示 重要 ) 都 不 相同 。 这 两 个 元 素 都 


在 本 章 前 面 讲 过 了 。 


由 于 mark 是 HTMLS 的 新 元 素 ， 因 此 
旧 的 浏览 器 不 会 默认 加 上 黄色 背景 (参见 图 
4.8.2 和 图 4.84) 。 可 以 在 样式 表 中 加 上 mark 
{ background-color: yellow; } 让 这 些 
浏览 器 实现 同样 的 效果 。 


不 要 仅仅 因为 要 给 文字 加 上 背景 颜色 
或 其 他 视觉 上 的 考虑 而 使 用 mark。 如 果 你 只 
是 要 给 一 块 文字 添加 样式 ， 又 没有 合适 的 语 
义 化 元 素 ， 就 可 以 使 用 span 元 素 (本 章 将 讲 
到 ) ， 并 用 CSS 添加 样式 。 


4.9 ”解释 缩写 词 


缩写 词 很 常见 ， 如 开 、M.D.， 甚 至 good 
ol HTML, nj LJ fii Hl abbr 元 素 标 记 缩 写 词 








并 解释 其 含义 (参见 图 4.9.1、 图 4.9.2 和 
图 4.9.3 ) 。 不 必 对 每 个 缩写 词 使 用 abbr， 只 
在 需要 帮助 访问 者 了 解 该 词 含 义 的 时 候 使 用 。 





<body> 


<p>The «abbr title-"National Football 
— League" »NFL«/abbr» promised a «abbr 
— title-"light amplification by 

— stimulated emission of radiation"» 
— laser«/abbr» show at 9 p.m. after every 
— night game.«/p» 


«p»But, that's nothing compared to what 

— «abbr»MLB«/abbr» (Major League 

— Baseball) did. They gave out free 

=> <abbr title-"self-contained 
underwater 

— breathing apparatus"»scuba«/abbr» gear 
— during rain delays.«/p» 











«/body» 
</html> 
4.9.1 使 用 可 选 的 title 属性 提供 缩写 词 的 全 














[n] 


称 。 另 外 ， 也 可 以 将 全 称 放 在 缩写 词 后 面 的 括号 里 
( 这 样 做 或 许 更 好 ) 还 可 以 同时 使 用 这 两 种 方式 ， 
并 使 用 一 致 的 全 称 。 对 于 像 laser( 激光 ) .scruba( 水 
肺 潜水 ) 这 样 的 词汇 ， 大 多 数 人 都 很 熟悉 了 ， 因 此 
对 它们 使 用 abbr 并 提供 title 其 实 并 无 必要 ， 这 里 

使 用 它们 是 出 于 演示 目的 
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The NFL promised a laser show at 9 p.m. after 
every night game. 


But, that's nothing compared to what MLB (Major 
League Baseball) did. They gave out free scuba 
gear during rain delays. 








4.9.2” 当 缩写 词 有 title 属性 时 ，Firefox 和 Opera 
会 添加 虚线 下 划 线 以 引起 注意 。 ( 可 以 通过 CSS 让 
其 他 浏览 器 也 这 样 做 ; 参见 提示 。 ) 对 除 正 6 以 外 的 
所 有 浏览 器 ， 当 访问 者 将 鼠标 移 至 abbr 上 ， 该 元 素 
title 属性 的 内 容 就 会 显示 在 一 个 提示 框 里 
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© abbreviations 
e Q fi (Obruceontheloose.com/htmlcss/exe rg ag 


The NFL promised a faser show at 9 p.m. affer every night game. 
light amplification by stimulated emission of radiation 


But, that's nothing compared to what MLB (Major League 
Baseball) did. They gave out free scuba gear during rain delays. 





4.9.3 Chrome 和 一 些 其 他 的 浏览 器 会 将 缩 
写 词 的 title 显示 在 提示 框 里 ， 但 它们 不 会 让 缩 
写 词 本 身 有 显示 上 的 区 别 ， 除 非 你 自行 添加 一 
些 CSS 























解释 缩写 词 的 步骤 

(D 输入 <abbr。 

(2) 作为 可 选 的 一 步 ， 输 入 title-"expa- 
nsion", KB expansion 是 缩写 词 的 全 称 。 

(3) 输入 >。 

(4) 然后 输入 缩写 词 本 身 。 

(5) 最 后 输入 </abbr> 结束 标记 。 

(6) 作为 可 选 的 一 步 ， 输 入 一 个 空格 
和 (expansion) ， 其 中 expansion 是 缩写 词 的 
全 称 。 


GBD 通常 ， 仅 在 缩写 词 第 一 次 出 现在 屏幕 
上 时 给 出 其 全 称 ( 通 过 title 或 括号 的 方式 ) ， 
参见 图 4.9.1。 








用 括号 提供 缩写 词 的 全 称 是 最 直接 的 
解释 缩写 词 的 方式 ， 能 让 尽 可 能 多 的 访问 者 
看 到 这 些 内 容 ， 参 见 图 4.9.1。 例如， 使 用 智 
能 手机 和 平板 电脑 等 触摸 屏 设 备 的 用 户 可 能 
无 法 移 到 abbr 元 素 上 查看 title 的 提示 框 。 

因此 ， 如 果 要 提供 缩写 词 的 全 称 ， 应 该 尽量 
将 它 放 在 括号 里 。 


D 如 果 使 用 复数 形式 的 缩写 词 ， 全 称 也 
要 使 用 复数 形式 。 


CJES 作为 对 用 户 的 视觉 提示 ，Firefox 和 
Opera 等 浏览 器 会 对 带 title 的 abbr 文字 使 用 
虚线 下 划 线 ， 参 见 图 49.2， 如 果 要 在 所 有 的 浏 
览 器 (IE6 除外 ) 中 复制 这 种 样式 ， 可 以 在 样式 
表 中 加 上 这 条 语句 : abbr[title] ( border- 
bottom: 1px dotted #000; Jj. 无论 abbr 是 
否 添加 了 下 划 线 样式 ,浏览 器 都 会 将 title 属性 
内 容 以 提示 框 的 形式 显示 出 来 ， 参 见 图 493. 


如 果 在 Internet Explorer 7 中 看 不 到 
abbr 有 虚线 下 划 线 ， 试 着 为 其 父 元 素 的 CSS 
添加 1line-height 属性 (参见 第 10 章 ) 。 


IE6 不 支持 abpr， 因 此 既 没有 虚线 下 
划 线 也 没有 提示 框 ， 只 有 文字 本 身 。 如 果 确实 
希望 在 IE6 中 为 abbr 应 用 样式 ， 可 以 在 CSS 
之 前 将 document.createElement('abbr'); zk 
在 针对 IE6 的 JavaScript 文件 里 。 要 我 说 ， 
不 如 略 过 这 一 办 法 ， 把 IE6 当 作 一 个 例外 。 
(关于 在 IE8 及 旧版 本 中 使 用 document. 
createElement 让 元 素 看 起 来 像 HTML5 T 
加 样式 的 新 元 素 ， 参 见 第 11 章 。) 


在 HTML5 之 前 有 acronym ( 首 字 母 
缩写 词 ) 元 素 ， 但 设计 和 开发 人 员 常 常 分 不 
清楚 缩写 词 和 首 字 母 缩写 词 ， 因 此 HTML5 
废除 了 acronym 元 素 ， 让 abbr 适用 于 所 有 的 
场合 。 


4.410 ”定义 术语 

dfn 元 素 对 文档 中 首次 定义 术语 的 地 方 进 
行 标记 。 并 不 需要 用 它 标记 术语 的 后 续 使 用 。 
仅 用 dfn 包 围 要 定义 的 术语 ,而 不 是 包围 定义 ， 
参见 图 4.10.1。 











«body» 


<p>The contestant was asked to spell 

— "pleonasm." She requested the definition 
— and was told that «dfn»pleonasm«/dfn» 
— means "a redundant word or expression" 
— (Ref: «cite»«a href=" http://dictionary. 
— reference.com/browse/pleonasm" rel= 
 "external'"»dictionary.com«/a»«/cite»).«/p» 


«/body» 
«/html» 











4.10.1. 注意， 在 这 个 例子 中 ， 尽 管 pleonasm 
出 现 了 两 次 ， 但 只 对 第 二 个 用 dfn 进行 了 标记 ， 
为 那 时 才 定 义 这 个 术语 ( 即 定义 实例 ) 。 类 似 地 ， 

如 果 我 在 文档 后 面 用 到 pleonasm ， 也 不 会 用 dfn 标 
记 ， 因 为 我 已 经 定义 过 它 了 。 默 认 情 况 下 ， 浏 览 
器 会 为 dfn 文本 加 上 与 普通 文本 不 同 的 样式 ， 参 见 
图 4.10.2。 同 时 ， 不 必 在 每 次 使 用 dfn 时 都 使 用 
cite 元 素 ， 该 元 素 只 在 引用 参考 源 的 时 候 使 用 
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The contestant was asked to spell "pleonasm." She requested 
the definition and was told that pleonasm means "a redundant 


word or expression" (Ref. dictionary.com). 








E Defining Instance of a Term 








图 4.10.2 


一 些 浏览 器 ( 如 这 里 的 Firefox ) 默认 
以 斜体 显示 dfn 元 素 ， 与 cite 一样。 不过， 基于 
Webkit 的 浏览 器 (如 Safari 和 Chrome ) 不 会 这 样 
做 。 为 了 让 它们 统一 ， 可 以 在 样式 表 中 加 入 dfn ( 
font-style: italic; } (参见 第 8 章 和 第 10 3€ ) 




















将 与 定义 有 关 的 dfn 放 在 什么 位 置 是 一 
个 重要 的 问题 。HTMLS5 规定 : “作为 距离 
dfn 元 素 最 近 的 祖先 区 块 的 段落 、 描 述 列表 组 
或 区 块 ， 除 了 包含 dfn 元 素 以 外 ， 还 必须 包 
括 该 术语 的 定义 。” 这 意味 着 dfn 及 术语 的 
定义 应 该 是 彼此 相 邻 的 。 图 4.10.1 和 第 三 个 提 
示 中 的 例子 都 是 这 样 ，dfn 及 术语 的 定义 位 于 
同一 个 段落 。 




















标记 术语 的 定义 实例 
(1) 输入 <dfn>。 

(2) 输入 要 定义 的 术语 。 
G) 输入 </dfn>。 


NES 还 可 以 在 定义 列表 (元 素 ) 中 使 用 
dfn， 参 见 第 15 章 。 


CES 如 果 要 将 用 户 引 向 术语 的 定义 实例 ， 
可 以 给 dfn 加 个 id， 然 后 让 站 点 其 他 位 置 的 
链接 指向 它 。 


dfn 可 以 在 适当 的 情况 下 包 住 其 他 的 
短语 元 素 ， 如 abbr。 例如 ，<p>A «dfn»«abbr 
title-"Junior"»Jr.«/abbr»«/dfn» is a son 
with the same full name as his father.«/p». 


CES HTMLS 称 ， 如 果 在 dfn 中 添加 可 选 
的 title 属性 ， 其 值 应 与 dfn 术语 一 致 。 正 如 
在 上 一 条 提示 中 看 到 的 ， 如 果 只 在 dfn € dt 
套 一 个 单独 的 abbr, dfn 本 身 没 有 文本 结 点 ， 
那么 可 选 的 title 只 能 出 现在 abbr 里 。 


4.11 创建 上 标 和 下 标 


比 主体 文本 稍 高 或 稍 低 的 字母 或 数字 分 
别称 为 上 标 和 下 标 ， 其 表示 参见 图 4.11.1。 
HTML 包含 用 来 定义 这 两 种 文本 的 元 素 。 常 
见 的 上 标 包括 商标 符号 、 指 数 和 脚注 编号 等 ， 
参见 图 4.11.2。 常 见 的 下 标 包括 化 学 符号 等 。 


创建 上 标 和 下 标的 步骤 
(1) 输入 <sub> 创建 下 标 ， 或 输入 <sup> 
创建 上 标 。 
(2) 输入 要 出 现在 下 标 或 上 标 里 的 字符 或 
符号 。 
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(3) 根据 第 (1) 步 中 使 用 的 元 素 ， 输 入 
«/sub» 或 </sup> 结束 该 元 素 。 





«body» 


«article» 
«hi»Famous Catalans«/hi» 
<p>When I was in the sixth grade, I 
— played the cello. There was a 
— teacher at school who always used 
— to ask me if I knew who "Pablo 
— Casals" was. I didn't at the time 
— (although I had met Rostropovich once 
— at a concert). Actually, Pablo Casals 
— real name was «i»Pau«/i» Casals, Pau 
— being the Catalan equivalent of Pablo 
«a href-'itfootnote-1" title-"Read 
— footnote"»«sup»1«/sup»«/a».«/p» 


<p>In addition to being an amazing 

— cellist, Pau Casals is remembered in 
— this country for his empassioned 

— speech against nuclear proliferation 
— at the United Nations «a href= 

— "iFfootnote-2" title-"Read 

— footnote"»«sup»2«/sup»«/a» which 
— he began by saying "I am a Catalan. 

— Catalonia is an oppressed nation."«/p» 


«footer» 
«p»«sup»i«/sup»It means Paul in 
—> English.«/p» 
«p»«sup»2«/sup»In 1963, I believe.«/p» 








«footer» 
«article» 
«/body» 
«html» 
图 4.11.1. sup 元素 的 一 种 用 法 就 是 表示 脚注 编号 。 


根据 从 属 关 系 , 我 将 脚注 放 在 article 的 footer 里 ， 
而 不 是 整个 页 面 的 footer 里 。 我 还 为 文章 中 每 个 
脚注 编号 创建 了 链接 , 指向 footer 里 对 应 的 脚注 ， 
从 而 让 访问 者 更 容易 找到 它们 。 同 时 ， 注 意 链接 里 
的 title 属性 也 提供 了 一 些 提示 
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Famous Catalans 


When I was in the sixth grade, I played the cello. There was a teacher 
at school who always used to ask me if I knew who "Pablo Casals" 
was. I didn't at the time (although I had met Rostropovich once at a 
concert). Actually, Pablo Casals' real name was Pan Casals, Pau 


being the Catalan equivalent o£ Pablo! : 


In addition to being an amazing cellist, Pau Casals is remembered in 
this country for his empassioned speech against nuclear proliferation 


atthe United Nations? which he began by saying "I am a Catalan. 
Catalonia is an oppressed nation." 


Vit means Paul in English. 


Hn 1963, I believe. 





1T 





图 4.11.2 不幸 的 是 ,sub 和 sup 元 素 会 扰乱 行 间距 。 
注意 第 一 段 第 4 行 和 第 5 行 之 间 的 距离 以 及 第 二 段 
第 2 行 和 第 3 行 之 间 的 距离 比 其 他 行 间距 要 大 一 些 。 
不 过 ， 可 以 使 用 一 些 CSS 解决 这 个 问题 。 关 于 解 
决 的 办 法 ,参见 本 节 末 尾 的 “修复 使 用 sub 和 sup 
时 的 行 间距 问题 ”。 还 可 以 对 带 链 接 的 上 标 进行 适 
当 的 处 理 ， 让 下 划 线 不 至 于 离 上 标 文 字 太 远 


D 大 多 数 浏览 器 会 自动 将 上 标 或 下 标 文 
字 的 字号 减少 几 磅 。 

















上 标 是 对 某 些 外 语 缩写 词 进行 格式 
化 的 理想 方式 ， 例 如， 法 语 中 用 M" 表示 
Mademoiselle ( 小 姐 ) , 西班牙 语 中 用 3* 表 
示 tercera (第 三 ) 。 此 外 ， 一些 数字 形式 也 
要 用 到 上 标 ， 如 2". 5^. 


下 标 适 用 于 化 学 分 子 式 (如 HO ) 。 
例如 ，<p>I'm parched. Could I please have 
a glass of H«sub»2«/sub»0?«/p». 


GNES 上 标 和 下 标 字符 会 轻微 地 扰乱 行 与 行 
之 间 均 匀 的 间距 ， 参 见 图 4.11.2。 解 决 的 办 法 
参见 “修复 使 用 sub 和 sup 时 的 行 间距 问题 ”。 
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修复 使 用 sub 和 sup 时 的 行 间 距 问题 

sub 和 sup 元素 会 轻微 地 增 大 行 高 ， 参 
4.84112, FA, H—.& CSSA TAA 
这 个 问题 。 

下 面 的 代码 来 自 Nicolas Gallagher 和 
Jonathan Neal 出 & 的 normalize.css (http:// 
necolas.github.com/normalize.css/ ) 。 下 面 的 
方法 并 不 是 他 们 发 明 的 ， 他 们 借用 了 https:// 
gist.github.com/413930 里 的 代码 并 去 掉 了 注 
释 。 上 面 这 个 GitHub 的 链接 里 包含 了 对 这 
一 段 CSS 的 详细 解释 ， 建 议 你 去 看 一 看 。 同 
时 ， 你 可 以 在 自己 的 项 目 里 使 用 normalize. 
css， 推 荐 你 下 载 这 个 文件 。 该 文件 可 以 帮 你 
建立 一 个 跨 浏 览 器 的 统一 基准 样式 表 ， 其 文 
档 也 很 详尽 【参见 11.4 节 ) 。 

/* 

* 在 所 有 浏览 器 中 防止 sub 和 sup 影响 line-height 

* gist.github.com/413930 

aff 


442 ”标注 编辑 和 不 再 准确 的 文本 


有 时 可 能 需要 将 在 前 一 个 版 本 之 后 对 页 
面 内 容 的 编辑 标 出 来 ， 或 者 对 不 再 准确 、 不 
再 相关 的 文本 进行 标记 。 有 两 种 用 于 标注 编 
辑 的 元 素 : 代表 添加 内 容 的 ins 元 素 和 标记 
已 删除 内 容 的 del 元 素 (参见 图 4.12.1 ~ 图 
4.12.4) 。 这 两 个 元 素 既 可 以 单独 使 用 ， 也 可 
以 一 起 使 用 。 

同时 ，s 元 素 用 以 标注 不 再 准确 或 不 再 
相关 的 内 容 (一 般 不 用 于 标注 编辑 ) ， 参 见 
图 4.12.5 和 图 4.12.6。 







































































1. 标记 新 插入 文本 
(1) 输入 «ins», 
(2) 输入 新 内 容 。 


SUb, 

sup { 
font-size: 75%; 
line-height: 0; 
position: relative; 
vertical-align: baseline; 


) 


sup { 
top: -0.5em; 


) 


sub { 
bottom: -0.25em; 


} 

你 可 能 还 需要 根据 内 容 的 字号 对 这 个 
CSS 做 一 些 调整 ， 使 各 行 行 高 保持 一 致 ， 
但 上 面 的 代码 至 少 已 经 为 你 建立 了 很 好 的 起 
点 。 关 于 如 何 创建 样式 表 并 将 CSS 添加 到 
站 点 里 ， 参 见 第 8 章 。 


(3) 输入 </ins>。 


2. 标记 已 删除 文本 

(1) 将 光标 放 在 待 标记 为 已 删除 的 文本 或 
元 素 之 前 。 

(2) 输入 <del>。 

(3) 将 光标 放 在 竺 标记 为 已 删除 的 文本 或 
元 素 之 后 。 

(4) 输入 </del>。 








3. 标记 不 再 准确 或 不 再 相关 的 文本 

(1) 将 光标 放 在 希望 标记 为 不 再 准确 或 不 
再 相关 文本 的 前 面 。 

(2) 输 入 <s>。 

(3) 将 光标 放 在 希望 标记 的 文本 的 后 面 。 

(4) 输入 </s>。 
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Noting Edits - Mozilla Firefax a |i x] 


«body» File Edit View History Bookmarks Tools Help 
| ! Noting Edits Et z 





<h1>Charitable Gifts Wishlist</h1> 


<p>P1 ider donati 7 
Sof the following itens to the village's Charitable Gifts Wishlist 


— community center:«/p» 





Please consider donating one or more ofthe following 








«ul» : nau: : . 

di»«del»2 desks</del></li> items to the village's community center: 

<li>1 chalkboard«/li» 

di»«del»4 «abbr»OLPC«/abbr» (One o z-desks 

— Laptop Per Child) XO laptops * 1 chalkboard 

> </del></li> * 4-OLPC (One-Laptop-Per-Child) XO lapteps 
up ee bicycle«/ins»«/li» E 
</body> Dene MEET P 
</html> 4.12.2. 浏览 器 通常 对 已 删除 的 文本 加 上 删除 











线 ， 对 插入 的 文本 加 上 下 划 线 。 可 以 用 CSS 修改 
图 4.12.1 在 这 个 礼品 清单 上 一 次 发 布 之 后 ， 又 增 这 些 样式 

加 了 一 个 条 目 (bicycle ), 同时 根据 del 元 素 的 标注 ， 

移 除了 一 些 已 购买 的 条 目 。 使 用 ins 的 时 候 不 一 定 

要 使 用 del， 反 之 亦 然 。 浏 览 需 通 常会 让 它们 看 起 

来 与 普通 文本 不 一 样 ， 参 见 图 4.12.2 



























































<body> 
«hi»Charitable Gifts Wishlist</h1> 


«del» 
«p»Please consider donating one or more of the following items to the village's community 
— center:«/p» 

«/del» 


«ins» 
«p»Please note that all gifts have been purchased.«/p» 
<p>Thank you «em»so much«/em» for your generous donations!«/p» 
«/ins» 


«del» 
«ul» 
<li><del>2 desks«/del»«/li» 
«li» chalkboard«/li» 
<li><del>4 «abbr»OLPC«/abbr» (One Laptop Per Child) XO laptops«/del»«/li» 
<li><ins>1 bicyclec/ins»«/1li» 
</ul> 
</del> 


</body> 
</html> 

















E 4.12.3 del fll ins 是 少 有 的 既 可 以 包围 短语 内 容 (HTML5 之 前 称 “ 行 内 元 素 ”) 又 可 以 包围 块 级 内 容 
的 元 素 ， 如 下 面 的 代码 所 示 。 不 过 ， 浏 览 器 对 它们 的 默认 显示 会 有 区 别 (参见 图 4.12.4) 




















(C) Noting Edits 


Ll C fi © fle:///e:;HTML9620VQS/Char or E 


«body» 
«hi»Today's Showtimes</h1> 


Charitable Gifts Wishlist <p>Tickets are available for the following 
— times today:«/p» 


«ol» 
<li><ins>2 p.m. (this show just added!) 
Please note that all gifts have been purchased.  «fins»«/li» 
«li»«s»5 p.m.«/s» SOLD OUT«/li» 
Thank you so much for your generous donations! «li»«s»8:30 p.m.«/s» SOLD OUT«/li» 
«/ol» 
* 2-desks 
€ ehalkboard «/body» 
</html> 














E 4.12.5 ”这 个 例子 展示 了 一 个 关于 演出 时 间 的 有 
序列 表 ( ol 元素 ) 。 与 剩余 票数 不 再 相关 的 时 段 
都 用 s 元 素 进 行 了 标记 。 可 以 对 任何 短语 使 用 s, 
而 不 仅 限于 列表 项 (1i 元 素 ) 里 的 文本 。 不 过 ， 
不 要 像 del 和 ins 那样 用 s 标记 整个 段落 或 其 他 块 
级 元 素 

















Noting Edits - Mozilla Firefox | elni xi 
File Edt View History Bookmarks Tools Help 


I ! Noting Edits [x] "3 
Charitable Gifts Wishlist 


Please consider donating one or more of the following items 
to the village's community center: 


























?Noting Edits and Inaccurate lolxl 


Ele Edt View History Bookmarks Tools Help 


Please note that all gifts have been purchased. | | Noting Edits and Inaccurate Text |+] *, 





Thank you so much for your generous donations! 


Today's Showtimes 








e 2-desles 
* | chalkboard 
* 和 Tickets are available for the following times today: 
1. 2 p.m. (this show just added!) 
4.12.4. 对 于 包围 块 级 内 容 的 del 和 ins, KZ 2. 5p SOLD OUT 
数 浏 览 器 的 默认 显示 样式 与 预期 一 致 ， 如 Chrome 3, &30-g-m- SOLD OUT 


(上 图 ) 。 也 就 是 说 ， 它 们 反映 整 块 内 容 都 是 删除 
的 内 容 或 插入 的 内 容 。 截 至 本 书写 作 之 际 ，Firef ER 
不 会 这 样 做 ， 它 们 只 对 包含 在 其 他 元 素 中 的 del 和 图 4.12.6 MANET, MERAN s RMM 
ins 短语 文本 添加 删除 线 或 下 划 线 。 关 于 如 何 修正 P 

这 一 问题 ， 参 见 本 节 末 尾 的 “让 del 和 ins 的 显示 

一 致 
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del je ins 都 支持 两 个 属性 : cite 和 
datetime, cite 属性 (区 别 于 cite 元 素 ) 用 于 
提供 一 个 URL， 指 向 说 明 编 辑 原因 的 页 面 。 例 
Je, «ins citez"http://www.movienews. 
com/ticket-demandhigh.html"»2 p.m. 
(this show just added!)«/ins». datetime 
属性 提供 编辑 的 时 间 。 (关于 datetime 可 接 
受 的 格式 ,参见 4.4 节 。) 浏览 器 不 会 将 这 
两 个 属性 的 值 显示 出 来 ， 因 此 它们 的 使 用 并 
不 广泛 。 不 过 ， 应 该 尽量 包含 它们 ， 从 而 为 
内 容 提供 一 些 背景 信息 。 它 们 的 值 可 以 通过 
JavaScript 或 分 析 页 面 的 程序 提取 出 来 。 


EED 在 任何 需要 向 访问 者 展示 内 容 变 化 情 
况 的 时 候 ， 都 可 以 使 用 del 和 ins。 例如 ， 经 
常 可 以 看 见 一 些 Web 设计 与 开发 教程 使 用 它 
们 表示 初次 发 布 以 后 新 更 新 的 信息 ， 这 样 可 
以 保持 原始 信息 的 完整 性 。 博客、 新 闻 网 站 
等 也 可 以 这 样 做 。 


CHE 用 jins 标记 的 文本 通常 会 显示 一 条 下 
划 线 ， 参 见 图 4.12.2。 由 于 链接 通常 也 以 下 划 
线 表示 (即使 你 的 网 站 不 是 这 样 ， 其 他 很 多 
网 站 都 是 这 样 ) , 这 可 能 会 让 访问 者 感到 困惑 。 
可 以 使 用 样式 表 改变 插入 的 段落 (或 链接 ) 
的 显示 (参见 第 10 章 ) 。 


用 del 标记 的 文本 通常 会 显示 一 条 
删除 线 ， 参 见 图 4.12.2。 为 什么 不 直接 清除 
这 些 文字 呢 ? 这 取决 于 内 容 的 上 下 文 。 加 
上 删除 线 以 后 ， 用 户 就 很 容易 看 出 修改 了 什 
么 。( 同 时， 屏幕 阅读 器 可 以 读 出 被 删除 
的 内 容 ， 不 过 目前 对 这 一 特性 的 支持 还 不 
充分 。 ) 


(NES 仅 在 有 语义 价值 的 时 候 使 用 del, ins 
和 s。 如 果 只 是 出 于 装饰 的 原因 要 给 文字 添加 
下 划 线 或 删除 线 ， 可 以 用 CSS 实现 这 些 效果 
(参见 10.16 节 ) 。 


UNES HIMLS 指出 : “s 元 素 不 适用 于 指出 
文档 的 编辑 ; 要 标记 文档 中 一 块 已 移 除 的 文本 ， 
应 使 用 del 元 素 。” 有 时 ， 这 之 间 的 差异 是 很 微 
妙 的 ,只 能 由 你 决定 哪 种 选择 更 符合 内 容 的 语义 。 


让 del 和 ins 的 显示 一 致 

浏览 器 对 块 级 del 和 ins 内 容 的 显示 
并 不 一 致 。 大 多 数 与 预期 一 致 ， 对 del 
套 的 内 容 添加 删除 线 ， 对 ins 点 套 的 内 容 
添加 下 划 线 。 不 过 ， 至 少 Firefox 并 不 是 这 
样 做 的 ， 参 见 图 4.12.4。 

可 以 通过 下 面 的 CSS 规则 修复 这 一 问 
题 (* 代 表 del de ins 里 面 的 所 有 元 素 均 以 
下 面 的 规则 处 理 ) : 

del * ( 

text-decoration: line-through; 


} 


ins * ( 
text-decoration: underline; 


) 
如 果 你 不 了 解 如 何 将 这 些 代码 加 到 样 
式 表 ， 请 参阅 第 8 章 。 


4.13 ”标记 代码 


如 果 你 的 内 容 包含 代码 示例 、 文 件 名 
或 程序 名 ， 就 可 以 使 用 code 元 素 (参见 图 
4.13.1 和 图 4.13.2 ). 要 显示 单独 的 一 块 代码 ( 位 
于 句子 以 外 ) ， 可 以 用 pre 元 素 包 住 code 元 
素 以 维持 其 格式 ( 具体 示例 参见 4.14 节 ) 。 














«body» 


<p>The «code»showPhoto()«/code» function 

— displays the full-size photo of the 

— thumbnail in our «code»&lt;ul id- 

— "thumbnail"&gt;«/code» carousel list.«/p» 


<p>This CSS shorthand example applies a 
»margin to all sides of paragraphs 

— «code»p ( margin: 20px; j«/code». Take 
>a look at «code»base.css«/code» to see 
— more examples.«/p» 














«/body» 
</html> 
4.13.1 code 元 素 表示 其 中 的 文本 是 代码 或 文 





件 名 。 默 认 情 况 下 ， 它 以 等 宽 字 体 显 示 (参见 
图 4.13.2 ) 。 如 果 你 的 代码 需要 显示 < 或 >， 应 分 
别 使 用 8lt; 和 &gt;。 这 里 第 二 个 code 的 例子 演 
示 了 这 一 点 。 如 果真 的 用 了 < 和 >， 浏览 器 会 将 
这 些 代码 当做 HTML 元 素 处 理 ， 而 不 是 当做 文本 
处 理 









































其 他 计算 机 相关 元 素 : kbd, samp 和 var 


kbd, samp 和 var 元 素 极 少 使 用 ,不 过 你 可 能 


口 kbd 元 素 
使 用 kbd 标记 用 户 输 入 指示 。 
<p>To log into the demo:«/p» 
«ol» 


Marking up Code - Mozilla Firefox & ni 到 


File Edit View History Bookmarks Tools Help 
kd. — 


The showPhoto () function displays the full-size photo 
ofthe thumbnail in out <ul id-"thunbnails"» 
carousel list. 





| | Marking up Code 





This CSS shorthand example applies a margin to all 
sides of paragraphs: p ( margin: 20px; }. Take a 


look at base.css to see more examples 





4.13.2. code 元 素 的 文本 使 用 等 宽 字体 ， 使 之 
看 起 来 像 代 码 


标记 代码 或 文件 名 的 步骤 
(1) 输入 <code>。 

(2) 输入 代码 或 文件 名 。 
(3) 输入 </code>。 


可 以 通过 CSS E X code (参见 图 
4.13.2 ) 默认 的 等 宽 字 体 样 式 ( 参见 第 10 章 ) 。 


会 在 内 容 中 用 到 它们 。 下 面 对 它 们 作 简 要 说 明 。 


<li>Type «kbd»tryDemo«/kbd» in the User Name field«/li» 
<li><kbd>TAB</kbd> to the Password field and type «kbd»demoPass«/kbd»«/li» 
«liit «kbd»RETURN«/kbd» or «kbd»ENTER«/kbd»«/1li» 


«/ol» 


与 code —4&£, kbd 默认 以 等 宽 字 体 显示 。 


口 samp 元 素 


samp 元 素 用 于 指示 程序 或 系统 的 示例 输出 。 
<p>Once the payment went through, the site returned a message reading, 
^«samp»Thanks for your order!«/samp»«/p» 


samp 也 默认 以 等 宽 字 体 显 示 。 
O var 元 素 
var 元 素 表 示 变 量 或 占 位 符 的 值 。 
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<p>Einstein is best known for <var>E</var>=<var>m</var><var>c</var><sup>2</sup>. 


> </p> 


var 也 可 以 作为 内 容 中 占 位 符 的 值 ， 例 如 ， 


«var»adjec-tive«/var», «var»verb«/var», 


var 默认 以 斜体 显示 。 


需要 注意 的 是 ， 可 以 在 HITMLS 页 面 中 使 用 math 等 


的 标记 。 更 多 信息 参见 http;//dev.w3.org/html5/spec-author-view/mathml.html., 


4.14 ”使 用 预 格 式 化 的 文本 


通常 ， 浏 览 需 会 将 所 有 额外 的 回 车 和 空格 
压缩 ， 并 根据 窗口 的 大 小 自动 换行 。 预 格式 化 








在 填词 游戏 的 答题 纸 上 可 以 放 入 
MathML 元 素 表 示 高 级 的 数学 相关 
Preformatted text - Mozilla Firefox E zi xj 


File Edit view History Bookmarks Tools Help 
|+ zi 





| |. Preformatted text 

















的 文本 可 以 保持 文本 固有 的 换行 和 空格 。 它 是 
计算 机 代码 示例 的 理想 元 素 ， 参 见 图 4141， 不 
过 你 也 可 以 将 它 用 于 文本 ( 比如 , ASCI 艺术 ?)。 


<body> 


<p>Add this to your style sheet if you want 

— to display a dotted border underneath the 

— «code»abbr«/code» element whenever it has 
>a «code»title«/code» attribute.«/p» 


«pre» 
«code» 
abbr[title] { 
border-bottom: 1px dotted #000; 


</code> 
</pre> 


</body> 
</html> 











4.14.1 ”对 于 包含 重要 的 空格 和 换行 的 文本 ( 如 这 
里 显示 的 CSS 代码 ) ，pre 元 素 是 非常 适合 的 。 同 时 
要 注意 code 元 素 的 使 用 ， 该 元 素 可 以 标记 pre 外 面 的 
代码 块 或 与 代码 有 关 的 文本 ( 更 多 细节 参见 413 节 ) 


























(D ASCI 艺术 指 的 是 用 计算 机 字符 ( 





主要 是 ASCI 字符 ) 表示 图 片 的 一 种 艺术 形式 ,， 通 


Add this to your style sheet if you want to display a dotted border 
underneath the abbr element whenever it has a title attribute. 


abbr[title] { 
border-bottom: ipx dotted #000; 


} 





4.14.2 ”注意 pre 内 容 里 的 缩 进 和 换行 都 被 保留 了 





使 用 预 格式 化 文本 的 步骤 

(1) 输入 <pre>。 

(2) 输入 或 复制 希望 以 原样 显示 的 文本 ， 
包括 所 需要 的 空格 、 回 车 和 换行 。 除 了 代码 
以 外 ,不 要 用 任何 HTML (Cl p ICR ) 标记 
这 些 文本 。 








(3) 输入 </pre>。 
ED 预 格式 化 的 文本 通常 以 等 宽 字 体 
( 如 Courier, Courier New 等 ) Xm, AJL 
图 4.14.2， 可 以 使 用 CSS 改变 字体 样式 (A 


见 第 10 章 ) 。 











常 要 求 使 用 等 宽 字体 显示 。 
一 一 译 者 注 
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CES 如 果 妥 显示 包含 HTML 元 素 的 内 容 ( 如 
教程 中 的 代码 示例 ) ， 应 将 包围 元 素 名 称 的 
< 和 > 分 别 改 为 其 对 应 的 字符 实体 Slt; 和 
&gt; (有 关 示 例 参见 4.13 节 ) 。 
就 会 试 着 显示 这 些 元 素 。 一定 要 对 页 面 进行 验 
证 ,检查 是 否 在 pre PKT HTML 元素 ( 参 
见 20.5 节 ) o 


和 否则， 浏览 器 


不 要 将 pre 作为 逃避 以 合适 的 语义 
标记 内 容 和 用 CSS 控制 样式 的 快捷 方式 。 例 
如 ， 如 果 你 想 发 布 一 篇 在 字 处 理 软件 中 写 好 
的 文章 ， 不 要 为 了 保留 原来 的 格式 ， 简 单 地 
将 它 复制 、 粘 贴 到 pre 里 。 相 反 ， 应 该 使 用 
(以 及 其 他 相关 的 文本 元 素 ) 标记 内 容 ， 编 
写 CSS 控制 页 面 的 布局 。 


同 段落 一 样 ，pre 默认 在 新 的 一 行 显 
T, ARLA 4.14.2。 


pre 在 表现 方面 的 注意 事项 

注意 ， 浏 览 器 通常 会 对 pre 里 面 的 内 容 关 
闭 自 动 换行 ， 因 此 ， 如 果 这 些 内 容 很 宽 ， 就 会 
影响 页 面 的 布局 ， 或 产生 横向 滚动 条 。 下 面 的 
CSS 规则 可 以 对 pre 的 内 容 打 开 自 动 换行 ， 但 
在 Internet Explorer7 及 以 下 版 本 中 并 不 适用 。 


pre ( 
white-space: pre-wrap; 


j 

与 之 相关 的 一 点 提示 是 ， 在 大 多 数 情 
况 下 不 推荐 对 div 等 元 素 使 用 white-space: 
pre 以 代替 pre, 因为 空格 可 能 对 这 些 内 容 ( 万 
其 是 代码 ) 的 语义 非常 重要 ， 而 只 有 pre 才 
能 始终 保留 这 些 空格 。 ( 同时 ， 如 果 用 户 在 
其 浏览 器 中 关闭 了 CSS， 格式 就 丢失 了 。) 

我 们 将 从 第 7 章 开 始 讲解 CSS。 文 本 
的 格式 化 将 在 第 10 章 中 讨论 。 


4.15 指定 细则 


根据 HTMLS, small 表示 细则 一 类 的 次 要 
的 注释 ，“ 通 常 包括 免责 声明 、 注 意 事项 、 法 
律 限制 、 版 权 信 息 等 。 有 时 还 用 来 署名 ， 或 用 
来 满足 许可 要 求 。”small 通常 是 行内 文本 中 
的 一 小 块 ， 而 不 是 包含 多 个 段落 或 其 他 元 素 的 
大 块 文本 (参见 图 4.15.1 和 图 4.15.2) 。 



































«body» 


«p»Order now to receive free shipping. 
—^ «small»(Some restrictions may apply.) 
^ «/small»«/p» 


«footer» 
«p»«small»&copy; 2011 The Super 
> Store. All Rights Reserved. 
^ «/small»«/p» 

«/footer» 


«/body» 
</html> 























4.15.1 在 下 面 的 两 个 例子 中 ，small 元 素 都 用 
以 表示 简短 的 法 律 声 明 。 在 第 二 个 例子 中 ，small 
表示 的 是 包含 在 页 面 级 footer 里 的 版 权 声 明 ， 这 
是 一 种 常见 的 用 法 





























7) Specifying Fine Print - Mozilla Firefox 
Ele Edit view History Bookmarks Tools Help 


[s i 


Order now to receive free shipping. (Some restrictions may apply) 





| | | specifying Fine Print 





© 2011 The Super Store. All Rights Reserved. 





E 4.15.2 在 一 些 浏览 器 中 ，small 元 素 中 文本 的 
字号 会 比 普 通 文 本 的 字号 小 ， 不 过 ， 视 觉 上 的 大 小 
与 是 否 该 用 它 标 记 内 容 是 毫 无 关系 的 




















指定 细则 的 步骤 
(1) 输入 <small>。 
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(2) 输入 表示 免责 声明 、 注 解 、 署 名 等 类 
型 的 文本 。 


(3) lA. «/ small», 


一 些 浏览 器 会 减 小 small 文本 的 字号 

(参见 图 4.15.2) 。 不 过 ， 一 定 要 在 small 符 
合 内 容 语义 的 情况 下 使 用 该 元 素 ， 而 不 是 为 
了 减 小 字号 而 使 用 。 总 是 可 以 用 CSS 控制 字 
号 (如 果 你 愿意 , 甚至 可 以 让 它 的 字号 变 大 ) 。 
更 多 信息 参见 10.5 节 。 


用 small 标记 页 面 的 版 权 信 息 是 一 种 
常见 的 做 法 CE 4.15.1 和 图 4.15.2 ) 。 不 过 ， 
small 只 适用 于 短语 ， 因 此 不 要 用 它 标 记 长 的 
法 律 声明 , 如 “使 用 条 款 ” 和 “隐私 政策 ”页 面 。 
这 些 内 容 应 该 用 段落 和 其 他 需要 的 语义 进行 
标记 。 


4.16 创建 换行 


浏览 器 会 根据 包含 内 容 的 块 或 窗口 的 宽 
度 让 文本 自动 换行 。 大 多 数 情 况 下 ， 让 内 容 
像 这 样 充满 整 行 是 很 合适 的 ， 但 有 时 你 希望 
手动 地 强制 文字 进行 换行 。 可 以 使 用 br 元 素 
实现 这 一 要 求 。 

要 确保 使 用 br 是 最 后 的 选择 ， 因 为 该 元 
素 将 表现 样式 带 入 了 HTML, 而 不 是 让 所 有 
的 呈现 样式 都 交 由 CSS 控制 。 例 如 ， 不 要 使 
用 br 模拟 段落 之 间 的 距离 。 相 反 ， 应 该 用 p 
标记 两 个 段落 并 通过 CSS 的 margin 属性 规定 
两 段 之 间 的 距离 。 

那么 ， 什 么 时 候 该 用 br 呢 ? 实际 上 ， 
对 于 诗歌 、 街 道 地 址 (参见 图 4.16.1 和 
4.16.2 ) 等 应 该 紧 挨 着 出 现 的 短 行 ， 都 适合 
用 br 元 素 。 





























«body» 


«p»53 North Railway Street«br /> 
Okotoks, Alberta«br /» 
Canada T10 4H5«/p» 


«p»53 North Railway Street «br /»0kotoks, 
— Alberta «br /»Canada T10 4H5«/p» 














«/body» 
</html> 
E 4.16.1 同样 的 地 址 出 现 了 两 次 ， 不 过 出 于 演示 











的 目的 ， 对 它们 的 编码 有 所 不 同 。 记 住 ， 代 码 里 的 
回 车 总 是 会 被 忽略 的 ， 因 此 两 个 段落 的 显示 是 一 样 
By. ZILEI 4.16.2。 此 外 , 在 HTMLS 中 书写 br BE 
可 以 使 用 <br /> 也 可 以 使 用 <br> 















































| 
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| 可 Creating a Line Break b ~ 





53 North Railway Street 
Okotoks, Alberta 
Canada T1Q 4H5 


53 North Railway Street 
Okotoks, Alberta 
Canada T1Q 4H5 











4.16.2 每 个 br 元 素 强行 让 接 下 来 的 内 容 在 新 
的 一 行 显示 


插入 换行 的 方法 
在 需要 换行 的 地 方 输入 <br /> (Ek «br» ) 。 





没有 单独 的 br 结束 标记 ， 因 为 它 是 所 谓 的 空 
元 素 ， 没 有 任何 内 容 。 

E 在 HTML5 F, WA <br /> 或 《bry> 
都 是 有 效 的 。 
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可 以 使 用 样式 表 控 制 段落 中 的 行 间 距 ( 参 
JL 106 35 ) 以 及 段落 之 间 的 距离 (参见 11.8 节 ) 。 


hCard 微 格式 ( http://microformats.org/ 
wiki/hcard ) 是 “用 于 表示 人 、 公 司 、 组 织 和 地 点 ” 
的 人 类 和 机 器 都 可 读 的 语义 形式 。 可 以 使 用 
微 格式 替代 图 4.16.1 中 表示 街道 地 址 的 方式 。 


4.17 创建 span 


同 div 一 样 ,span 元 素 是 没有 任何 语义 的 。 
不 同 的 是 ，span 只 适合 包围 字 词 短语 ， 而 div 
适合 包含 块 级 内 容 (参见 3.13 8) 。 

如 果 你 想 将 下 面 列 出 的 项 目 应 用 到 某 一 
小 块 内 容 ， 而 HTML 又 没有 提供 合适 的 语义 
化 元 素 ， 就 可 以 使 用 span。 

O 属性 ， 如 class, dir, id, lang, title 
等 (人 参见 图 4.17.1 和 图 4.17.2 ) 。 

O CSS 样式 。 

O JavaScript 行为 。 

由 于 span 没有 任何 语义 ， 因 此 应 将 它 作 为 最 
后 的 选择 , 仅 在 没有 其 他 合适 的 元 素 时 才 使 用 它 。 




















«body» 

«hi lang-'es'»La Casa Milà«/hi» 

«p»Gaudí's work was essentially useful. 
><span lang-"es"»La Casa Milà«/span» is 


— an apartment building and «em»real people 
— «/em» live there.«/p» 


«/body» 
</html> 














4174 在 这 个 例子 中 ， 我 想 对 一 小 块 文字 指定 不 同 
的 语言 ， 但 从 句子 的 上 下 文 看 ， 没 有 一 个 语义 上 适合 
La Casa Milà 的 HTML 元 素 。 上 段落 之 前 的 hi 包含 La Casa 
Mia， 它 在 语义 上 是 合适 的 ， 因 为 这 些 文字 就 是 后 面 内 
容 的 标题 。 因 此 对 标题 来 说 ， 直 接 在 hi 中 添加 Tang 属 
性 就 可 以 了 ， 不 必 为 了 指定 语言 而 包 一 个 span 

















Creating Spans - Mozilla Firefox loj xj 


File Edit view History Bookmarks Tools Help 


La Casa Milà 


Gaudi's work was essentially useful. La Casa Milà 
is an apartment building and rea! peopie live there. 








4.17.2 


span 元 素 没有 任何 默认 样式 


添加 span 的 步骤 

(1) 输入 <span。 

Q) 如 果 愿 意 ， 输 入 id="name"， 其 中 
name 用 于 唯一 地 标识 span 包含 的 内 容 。 

(3) 如 果 愿 意 ， 输 入 class="name"， 其 中 
name 是 span 所 属 类 的 名 称 。 

(4) 如 果 愿 意 ， 输 入 其 他 的 属性 (如 
dir, lang, title 等 ) 及 其 值 。 

(5) 输入 > 结束 开始 标记 。 

(6) 创建 希望 包含 在 span 里 的 内 容 。 

(7) 输入 </span>。 








ED span 没 有 任何 默认 格式 ， 参见 
图 4.17.2， 但 就 像 其 他 HIML 元 素 一 样 ， 可 以 用 
CSS 添 加 你 自己 的 样式 ( 参见 第 10 章 和 第 11 章 )。 


可 以 对 一 个 span 元 素 同 时 添加 class 
和 id 属 性 , 但 通常 只 应 用 这 两 个 中 的 一 个 (如 
果真 要 添加 的 话 ) 。 主 要 区 别 在 于 ，class 用 
于 一 组 元 素 ， 而 id 用 于 标识 页 面 中 单独 的 、 

唯一 的 元 素 。 


在 HTML 没有 提供 合适 的 语义 化 元 
素 时 ， 微 格式 经 常 使 用 span 为 内 容 添 加 语义 
化 类 名 ， 以 填补 语义 上 的 空白 。 要 了 解 更 多 
人 信息， 参见 http://microformats.org o 
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4.18 ”其 他 元 素 


本 节 讲 的 是 可 以 用 到 文本 中 的 其 他 元 素 ， 
但 它们 通常 只 在 极 少数 情况 下 才 会 用 到 ， 或 
者 浏览 锅 对 它们 的 支持 还 不 完善 ( 或 兼 有 之 )。 


1.u 元 素 

JH] b, i, s 和 small— f£, uot X Æ 
HTMLS 中 被 重新 定义 了 ， 使 之 不 再 是 无 语义 
的 、 用 于 表现 的 元 素 。 以 前 ,，u 元 素 用 于 为 文 
本 添加 下 划 线 。HTML5 对 它 的 定义 为 : 

U 元 素 为 一 块 文字 添加 明显 的 非 文本 注 
解 ， 比 如 在 中 文中 将 文本 标明 为 专 有 名 词 CPP 
中 文 的 专 名 号 ”) ， 或 者 标明 文本 拼写 有 误 。 

下 面 是 使 用 uv 标注 拼 错 的 词 的 例子 : 

«p»When they «u class-"spelling"» 

—recieved«/u» the package, they put 

>it with <u class-"spelling"»there 

—^«/u» other ones with the intention 

>of opening them all later.«/p» 

class 完全 是 可 选 的 ， 它 的 值 (可 以 是 你 
想 填 的 任何 内 容 ) 也 不 会 在 内 容 中 明显 指出 
这 是 个 拼写 错误 。 不 过 ， 可 以 用 它 对 拼 错 的 
词 添 加 不 同 于 普通 文本 的 样式 (vu 默认 仍 以 下 
划 线 显示 ) 。 也 可 以 通过 title 属性 添加 注释 ， 
如 [sic] ( 在 一 些 语言 中 用 于 指示 拼写 错误 的 
惯用 符号 ) 。 

仅 在 cite, em, mark 等 其 他 元 素 语义 上 
不 合适 的 情况 下 使 用 u 元 素 。 同 时 ， 最 好 改 
变 u 文 本 的 样式 ， 以 免 与 同样 默认 添加 下 划 
线 的 链接 文本 弄 混 ， 参 见 图 4.18.1。 
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| E Unarticulated Annotations 





When they recieved the package, they put it 
with there other ones with the intention of 
opening them all later. 





E 4.18.1 同 链接 一 样 ，u 元 素 默认 添加 下 划 线 。 
除非 用 CSS 改变 它们 的 样式 ， 否 则 容易 引起 混淆 

















2. wbr 元 素 

HTMLS 为 br 引入 了 一 个 近 素 元 素 ， 称 
为 wbr。 它 代表 “一 个 可 换行 处 ”。 可 以 在 一 
个 较 长 的 无 间断 短语 ( 如 URL ) 中 使 用 该 元 素 ， 
表示 此 处 可 以 在 必要 的 时 候 进 行 换行 ， 从 而 
让 文本 在 有 限 的 空间 内 更 具 可 读 性 。 因 此 ， 
与 br 不 同 ，wbr 不 会 强制 换行 ， 而 是 让 浏览 
器 知道 哪里 可 以 根据 需要 进行 换行 。 

下 面 是 一 些 例子 : 


«p»They liked to say, 

















"FriendlyFleasandFireFlies«wbr /» 
^^FriendlyFleasandFireFlies«wbr /> 
^^FriendlyFleasandFireFlies«wbr /> 
"as fast as they could over and 
> Over.«/p» 


«p»His favorite site is this«wbr 

/»is«wbr /»a«wbr /»really«wbr 

/»really«wbr /»longurl.com.«/p» 

输入 wbr 时 ， 既 可 以 用 <wbr />， 也 可 
以 用 <wbr>。 你 或 许 已 经 猜 到 了 ， 用 到 wbr 
的 场合 并 不 多 。 而 且 ， 截 至 本 书写 作 之 际 ， 
浏览 器 对 它 的 支持 并 不 一 致 。 尽 管 在 当前 版 
本 的 Chrome 和 Firefox 中 wbr 是 有 效 的 ， 但 
Internet Explorer 和 Opera 会 忽略 它 。 





D 专 名 号 用 于 表示 人 名 、 地 名 、 朝 代 名 等 专 名 。 一 一 译 者 注 
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3. ruby, rp 和 rt 元 素 

dr iA iC ruby annotation ) 是 东亚 语言 ( 如 
中 文 和 日 文 ) 中 一 种 惯用 符号 ， 通 常用 于 表 
示 生 个 字 的 发 音 。 这 些小 的 注解 字符 出 现在 
它们 标注 的 字符 的 上 方 或 右 方 。 它 们 常人 简称 
为 旁 注 (ruby 或 rabi) 。 日 语 中 的 旁 注 字 符 
称 为 振 假名 ( furigana ) 。 

ruby WRAK ENTIER rt P rp Æ 
HTML5 中 为 内 容 添 加 旁 注 标记 的 机 制 。rt 指 
明 对 基准 字符 进行 注解 的 旁 注 字符 。 可 选 的 
rp 元 素 用 于 在 不 支持 ruby 的 浏览 器 中 的 旁 注 
文本 周围 显示 括号 。 

下 面 的 例子 用 英文 占 位 符 展 示 了 这 种 结 
构 ， 帮 助 你 理解 代码 中 和 支持 它们 的 浏览 需 
中 对 各 类 信息 的 安排 方式 ， 参 见 图 4.182. 25 
注 文本 已 被 突出 显示 : 

«ruby» 

base «rp»(«/rp»«rt»ruby chars 
» </rt><rp>)</rp> 
base «rp»(«/rp»«rt»ruby chars 


» </rt><rp>)</rp> 
«/ruby» 














ruby charm ruby chars 
base base 





IW 4—L 


北京 

















图 4.18.2 支持 劳 注 标记 的 浏览 器 会 将 旁 注 文本 显示 
在 基准 字符 的 上 方 (也 可 能 在 旁边 ) ， 不 显示 括号 
现在 ， 展 示 一 个 真实 例子 。 例 子 中 有 两 
个 表示 Beijing 的 中 文 基 准 字 符 ， 以 及 伴随 它 
们 的 旁 注 字 符 (参见 图 4.18.3 ) : 
<ruby> 


dE <rp>(</rp><rt> J4 «/rt»«rp») 
«rp» 








京 <rp>(</rp><rt> H —Z «/rt»«rp») 
«rp» 
«/ruby» 





4.48.8 ”支持 劳 注 的 浏览 絮 中 显示 的 Beijing 的 

可 以 看 到 在 不 支持 ruby 的 浏览 絮 中 插 号 
的 重要 性 ， 参 见 图 4.18.4。 没 有 它们 ， 基 准 字 
符 和 旁 注 文 本 就 会 显示 在 一 起 ， 让 内 容 变 得 
混乱 。 





dE(2 X7] mH — à) 











E 4.18.4 ”支持 旁 注 的 浏览 器 会 忽略 xp dm. X 
显示 rt AR (参见 图 4.18.2 和 图 4.18.3 ) 。 不 过 ， 
不 支持 旁 注 的 浏览 器 会 在 括号 中 显示 rt 内 容 ， 如 
这 里 所 示 





在 本 书写 作 之 际 ， 只 有 Safari 5+、 
Chrome 11+ 和 Internet Explorer 所 有 版 本 拥 
有 基本 的 ruby 支持 (这 也 是 使 用 rp 的 原 
因 ) 。 Rit, Firefox 插件 HTML Ruby ( https:// 
addons.mozilla.org/en-US/firefox/addon/html- 
ruby/ ) 为 Firefox 4€ £& T x] dr i89 & d$. 


关于 旁 注 字 符 的 更 多 信息 ， 参 见 
http://en.wikipedia.org/wiki/Ruby character. 


4. bdi 和 bdo 元 素 

如 果 你 的 HTML 页 面 中 混合 了 从 左 至 右 
书写 的 字符 ( 如 大 多 数 语言 所 用 的 拉丁 字符 ) 
和 从 右 至 左 书 写 的 字符 (如 阿拉 伯 语 或 希 伯 
来 语 字 符 ) ， 就 可 能 要 用 到 bdi 和 bdo 元 素 。 
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不 过 ， 首 先 要 讲 一 点 背景 知识 。 除 非 
在 html 元 素 中 添加 dix 属性 并 将 属性 值 设 为 
rtl, 否则 内 容 的 基准 方向 都 默认 为 从 左 至 右 。 
Jh], «html dirz"rtl" lang="he"> 指 明 内 
容 的 方向 为 从 右 至 左 , 旦 基准 语言 为 希 伯 来 语 。 

就 像 我 在 全 书 多 个 示例 中 对 lang 的 处 理 
方式 一 样 ， 对 于 页 面 内 的 元 素 ， 如 果 其 内 容 
与 页 面 基 准 设置 不 一 致 ， 也 可 以 对 其 设置 dir 
属性 。 因 此 ， 如 果 基 准 语言 设 为 英语 ( <html 
lang="en"> ) ， 义 要 包含 一 段 希 伯 来 语 ， 就 可 
以 标记 为 «p dir-"rtl" lang="he">...</p>。 

在 单独 进行 了 设置 的 地 方 ， 内 容 一 般 将 
按照 希望 的 方向 显示 。 这 是 由 Unicode 的 双 问 
( bidi ) 算法 控制 的 。 

当 上 述 算法 不 按 设 想 的 方式 显示 文本 时 ， 
可 以 使 用 bdo( bidirectional override , 双向 重 写 ) 
元 素 对 内 容 进 行 重 写 。 通 常 ， 这 代表 HTML 
源 代码 中 的 内 容 是 视觉 顺序 而 非 逻 辑 顺 序 的 
情况 。 

视觉 顺序 ( visual order) 就 是 内 容 看 上 去 
的 顺序 一 一 HTML 源 代码 内 容 与 你 希望 显示 
的 顺序 相同 。 逻 辑 顺 序 (logical order) 则 与 
之 相反 ， 可 用 于 硕 伯 来 语 这 样 从 右 至 左 书写 
的 语言 ， 先 输入 从 右 至 左 的 第 一 个 字符 ， 然 
后 是 第 二 个 (也 就 是 第 一 个 字符 左边 的 字符 )， 
以 此 类 推 。 

根据 最 佳 实践 ，Unicode 希望 双向 文本 
都 以 逻辑 顺序 呈现 。 因 此 ， 如 果 文 本 是 以 视 
觉 顺 序 呈 现 的 ， 算 法 仍 会 让 字符 反 向 ， 显 示 
出 与 预期 相反 的 顺序 。 如 果 你 无 法 将 HTML 
源 代 码 中 的 文本 转换 为 逻辑 顺序 ( 例如， 这 
些 文本 可 能 来 自 数据 库 或 源 ) ， 就 只 能 依靠 
bdo 了 。 

要 使 用 bdo， 必 须 包 含 dir 属性 并 将 属 
性 值 设 为 ltr ( 左 至 右 ) xXx rtl (HEZA), 
间 定 你 希望 呈现 的 方向 。 继 续 先 前 在 英文 页 


























面 中 包含 希 伯 来 语 段 落 的 例子 ， 应 输入 <p 
lang-"he"»«bdo dirz"rtl'5...«/bdo»«/p», 
bdo 适用 于 段落 里 的 短语 或 句子 。 不 能 用 它 包 
围 多 个 段落 。 

bdi 元 素 是 HTML5 中 新 加 的 元 素 ， 用 于 
内 容 的 方向 未 知 的 人 情况。 不必 包 含 dir 属性 ， 
因为 默认 已 设 为 自动 判断 。 下 面 的 例子 来 自 
HTMLS 规范 ( 但 有 少许 修改 ) : 

这 个 元 素 特别 适用 于 包围 方向 未 知 的 用 
户 生 成 的 内 容 。 

在 这 个 例子 中 ， 用 户 名 与 用 户 提交 的 帖 
子 的 数量 显示 在 一 起 。 如 果 不 使 用 bdi 元 素 ， 
阿拉 伯 用 户 的 用 户 名 将 让 文本 变 得 难以 理解 

(双向 算法 会 把 冒号 和 数字 3 E T User 一 词 

GL, MRA posts — F4 ) 。 
<ul> 

«lbUser <bdi>jcranmer</bdi>:12 posts.</li> 

«lbUser «bdi»hober«/bdi»:5 posts.</li> 

«liUser «bdi»lzloó«/bdi»:3 posts.«/li» 
</ul> 




















AD 有 要 了 解 关 于 右 至 左 语言 这 一 主题 的 更 
多 信息 ,推荐 阅读 W3C 的 文章 “Creating HTML 
Pages in Arabic, Hebrew, and Other Right-to-Left 
Scripts" (www.w3.org/International/tutorials/ 
bidi-xhtml/ ) 。 


5. meter 元 素 

meter 元 素 也 是 HTML5 的 新 元 素 。 可 以 
用 它 表示 分 数 的 值 或 已 知 范 围 的 测量 结果 。 
简单 地 说 , 它 代 表 的 是 投票 结果 ( 例如 ,， "3096 
Smith, 37% Garcia, 33% Clark" ) 、 已 售票 
数 ( 例如，“ 共 850 张 , 已 售 811 张 ”)、 
考试 分 数 、 磁 盘 使 用 量 等 测量 数据 。 

HTMLS 建议 浏览 器 在 呈现 meter 时 ,在 
旁边 显示 一 个 类 似 温度 计 的 图 形 一 个 表 
示 测 量 值 的 横 条 ,测量 值 的 颜色 与 最 大 值 的 
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有 所 区 别 ( 当然 ， 除 非 它 们 相等 ) 。 作 为 当 
前 少数 几 个 支持 meter WNI gr, Chrome IE 
是 这 样 显示 的 ， 参 见 图 4.18.5。 对 于 不 支持 
meter 的 浏览 器 ， 可 以 通过 CSS meter 添加 
一 些 额外 的 样式 ， 或 用 JavaScript 进行 改进 。 


© Providing a Gauge with meter 


€ Q fi (Obruceontheloose.com/htmless/ vy ag 


Project completion status: eee 
Car brake pad wear: 页 


Miles walked during half-marathon: ew 





4.18.5 Chrome 等 支持 meter 的 浏览 器 会 自动 
显示 测量 值 ， 并 根据 属性 值 进行 着 色 。<meter> 和 
«/meter» 之 间 的 文字 不 会 显示 出 来 


尽管 不 是 必需 ， 不 过 最 好 在 meter 里 包含 
一 些 反 映 当 前 测量 值 的 文本 ， 供 不 支持 meter 
的 浏览 器 显示 ， 人 参见 图 4.18.6。 























D Providing a Gauge with meter Mosii mio 
File Edit view History Bookmarks Tools Help 





E Providing a Gauge with meter - 


Project completion status: 80% completed 


Car brake pad wear: 21% worn 


Miles walked during half-marathon: 4.5 





4.18.8 大 多 数 浏览 器 ( 如 Firefox ) 不 支持 
meter, 它们 会 将 meter 元 素 里 的 文本 内 容 显 示 出 来 。 
可 以 通过 CSS 改变 其 外 观 


下 面 是 一 些 meter 的 例子 ( 如 图 4.18.5 
和 图 4.18.6 所 示 ) : 
<p>Project completion status: <meter 


下 Value="0.80">80% completed</meter> 
></p> 


























<p>Car brake pad wear: <meter low= 
—"0.25" high="0.75" optimum="0" 
—valuez"0.21"»2190 worn«/meter»«/p» 
<p>Miles walked during half-marathon: 
—«meter minz"O" maxz"13.1" valuez"4.5" 
—'title-"Miles"»4.5«/meter»«/p» 

meter 不 提供 定义 好 的 单位 ， 但 可 以 使 用 
title 属性 指定 单位 ， 如 最 后 一 个 例子 所 示 。 
Chrome 会 以 工具 提示 的 方式 显示 它 ， 参 见 
4.18.5。 





IE meter 支持 好 几 个 属性 。value 是 其 中 
唯一 必需 包含 的 属性 。 如 果 不 指 定 min (最 小 
值 ) 和 max (最 大 值 ) ， 则 默认 将 它们 分 别 设 
为 0 和 1.0。low、high 和 optimun 属性 通常 
共同 作用 ， 它 们 将 范围 划分 为 低 、 中 、 高 三 
个 区 间 。optimum 代表 范围 内 的 最 优 位 置 ， 如 
上 文 例子 中 的 0 brake pad wear。 如 果 low 和 
high 的 值 均 不 是 最 优 的 ， 可 以 将 optimum iX 
为 它们 之 间 的 值 。 


截至 本 书写 作 之 际 ， 仅 有 Chrome 11+ 
和 Opera 11+ 支持 meter。 这 大 概 也 是 现实 中 
很 少见 到 它 的 原因 。 随 意 使 用 它 ， 只 是 需要 
了 解 大 多 数 浏览 器 默认 只 显示 meter 文本 而 不 
显示 图 形 。 


每 个 支持 meter 的 浏览 器 显示 测量 值 
图 形 的 样式 可 能 有 差异 。 


已 经 有 人 试 过 针对 支持 meter 的 浏览 
器 和 不 支持 的 浏览 器 统一 编写 meter 的 CSS。 
在 网 上 搜索 style HTMLS5 meter with CSS ( 用 
CSS 为 HTMLS 的 meter 添加 样式 ) ， 就 可 以 
找到 一 些 解决 方案 ( 注意 其 中 的 一 些 用 到 了 
JavaScript ) 。 


4.18 其 他 元 素 95 





meter 并 不 用 于 标记 没有 范围 的 普通 

测 eri 如 高 度 、 宽 度 、 距 离 、 周 长 等 。 例 
如 ， 这 种 写法 是 不 正确 的 : 

valuez"4.5"»4.5«/meter» miles yesterday.«/p». 


«p»I walked «meter 


一 定 不 要 将 meter 和 progress 元 素 混 
在 一 起 使 用 o 


6. progress 元 素 

progress 元 素 也 是 HTMLS 的 新 元 素 。 
可 以 用 它 表示 一 个 进度 条 ， 就 像 在 Web 应 用 
中 看 到 的 指示 保存 或 加 载 大 量 数 据 操作 进度 
的 那 种 组 件 。 

就 像 meter —FE, SFF progress 的 浏览 
器 会 根据 属性 值 自动 显示 一 个 进度 条 ， 参 见 
图 4.18.7。 同 时 ， 和 meter 一 样 ， 为 了 让 有 旧 的 

浏览 器 也 能 表现 进度 ， 最 好 在 progress 中 包 

含 反 映 当 前 进度 的 文本 ( 参见 图 4.18.8 ) ， 尽 
管 这 并 不 是 必需 的 。 














Indicating Progress 
€ Œ fi | bruceontheloose.com/htmlcss/examples/chapter-04/ vg 3B 


Please wait while we save your data. Current progress: 





图 4.18.7 Chrome 等 X fF progress 的 浏览 
会 自动 显示 进度 条 ， 并 根据 值 对 其 进行 着 色 。 
«progress» FI «/progress» 之 间 的 文本 不 会 显示 出 
来 。 在 这 个 例子 中 value 属性 设 成 了 0， 因此 整个 
横 条 都 是 同样 的 颜色 













Indicating Progress - Mozilla Firefox 
File Edt View History Bookmarks Tools Help 
|| Indicating Progress * 











Please wait while we save your data. Cutrent progress: 096 saved 






4.18.8 Firefox 不 支持 progress， 因 此 不 会 显 
示 有 颜色 的 横 条 ， 而 是 显示 该 元 素 里 面 的 文本 。 可 
以 通过 CSS 改变 其 外 观 








下 面 是 一 个 例子 : 


<p>Please wait while we save your 

— data. Current progress: «progress 
—"max-"100" value="0">0% saved 
—«/progress»«/p» 


对 s dace 已 经 超出 了 本 
书 的 范围 。 通 党， 你 只 能 通过 JavaScript 3) 
态 地 更 新 value i 性 值 和 元 素 里 面 的 文本 以 
间 示 任务 进程 〈( 例 如， 指示 已 完成 37% ) 。 
使 用 JavaScript 与 在 HIML 中 硬 编 码 ( 即 
«progress max-"100" valuez"37"»3796 
saved «/progress» ) 从 视觉 上 看 是 一 样 的 ， 
参见 图 4.18.9。 当 然 ， 不 文 持 的 浏览 器 会 显示 
为 图 4.18.8 所 示 的 样子 。 





o Indicating Progress 


c Q fi | O bruceontheloose.com/htmlcss/examples/chapter-04/ eg aa 


Please wait while we save your data. Current progress: BN 











图 4.18.9 Chrome 中 显示 的 进度 条 ,通过 JavaScript 
(或 直接 在 HTML 中 ) 将 value 属性 设 为 37( 假 
4E max="100" ) 
































progress 元 素 支 持 三 个 属性 : max, 
value 和 form。 它 们 都 是 可 选 的 ，max 属性 指 

定 任务 的 总 工作 量 ， 其 值 必 须 大 于 0。value 
是 任务 已 完成 的 量 。 如 果 progress AARE 
在 一 个 form 元 素 里 面 ， 又 需要 将 它们 联系 起 
来 ， 可 以 添加 form 属性 并 将 其 值 设 为 该 form 
的 id。 
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下 面 简 ee JavaScript 修 
rye progress 元 素 。 假 定 进度 条 已 经 设 定 了 一 
个 id, 如 : 


«progress max-"100" value-"o" 
> idz"progressBar"»096 saved«/progress» 


下 面 的 JavaScript 可 以 让 你 获取 该 元 素 : 
var bar = document.getElementById 
— ('progressBar'); 


然后 就 可 以 通过 bar.value 取出 或 设 定 value 
"m 例如 


9 值 。 , bar.value-37; 可 以 将 值 设 为 37。 


P MEZ ER, progress 元 素 已 
在 现代 浏览 器 中 获得 了 相当 坚实 的 支持 。 支 
持 它 的 浏览 器 包括 Chrome 11+, Firefox 6+, 
Internet Explorer 10 ( 在 本 书写 作 时 仅 有 平 
台 预 览 版 ) 和 Opera 11+, Safari 还 不 支持 该 
元 素 。 


ED + 


每 个 浏览 器 显示 进度 条 的 样式 可 能 不 同 ， 
EN 


过 CSS 为 它 应 用 样式 。 





























本 章 内容 

O 关于 Web 图 像 
口 获取 图 像 

口 选择 图 像 编辑 器 
a 保存 图 像 
口 在 页 面 中 搬入 网 像 

口 提供 替代 文本 

口 指定 图 像 尺寸 

口 在 浏览 带 中 改变 图 像 的 尺寸 

口 在 图 像 编 辑 器 中 改变 图 像 的 尺寸 
口 为 网 站 添加 图 标 


























为 Web 创建 图 像 与 为 在 纸 上 输 出 而 创建 
图 像 有 所 不 同 。 尽 管 Web 图 像 和 可 打印 图 像 
的 基本 性 质 是 相同 的 ,但 它们 在 格式 、 颜 色 、 
尺寸 /分 辨 素 、 速 度 、 透 明度 和 动画 等 六 个 主要 
方面 有 一 些 区 别 。 本 章 将 阐释 这 六 个 方面 的 
重要 要 素 ， 以 及 如 何 使 用 这 些 知识 为 网 站 创 
建 有 效 的 图 像 。 

创建 图 像 以 后 , 就 要 将 它们 插入 到 网 站 中 去 。 


5.1 XT Web 图 像 


让 我 们 来 看 看 创建 Web 图 像 时 应 记 住 的 
六 个 要 素 。 


1. 格式 
在 纸 上 打印 图 像 的 人 不 必 担 心 读者 将 使 用 




















什么 查看 图 像 。 但 Web 设计 人 员 就 要 考虑 这 个 
问题 。 每 天 ， 人 们 通过 数 以 百 万 计 的 Mac、 基 
于 Windows 的 PC、 手 机 、 平 板 电脑 等 各 种 各 
样 的 设备 访问 Web。 网 站 中 的 图 像 应 该 采用 这 
些 操作 系统 都 能 识别 的 格式 。 当 前 ，Web 上 用 
的 最 广泛 的 三 种 格式 是 GIF、PNG 和 JPEG, 
当前 的 浏览 器 都 能 查看 这 三 种 图 像 格式 。 

你 应 该 选择 质量 最 高 ， 同 时 文件 最 小 的 
格式 。 

JPEG 格式 适用 于 彩色 照片 ， 因 为 它 包含 
大 量 的 颜色 并 进行 了 合理 的 压缩 ， 使 文件 变 
得 比较 小 ， 参 见 图 5.1.1。 它 是 一 种 有 损 的 格 
式 ， 因 此 在 将 图 像 保存 为 JPEG 时 会 丢失 一 部 
分 原始 信息 ， 但 通常 这 样 做 是 值得 的 ， 因 为 
你 的 页 面 可 以 更 快 地 加 载 。 我 们 将 在 “速度 ” 
一 节 继 续 讨论 这 个 问题 。 












































5.1.1 全 彩 的 照片 应 保存 为 JPEG 或 PNG-24 格式 
( 男 见 彩 插 ) 





o8 $53 图 像 





PNG 和 GIF 格式 通常 用 于 保存 拥有 大 量 
纯色 和 图 案 或 有 透明 度 的 标志 之 类 的 文件 。 
对 于 连续 的 颜色 或 重复 的 图 案 ，PNG 和 GIF 
格式 的 压缩 效果 要 好 于 JPEG 的 。 选 择 PNG 
通常 更 好 一 些 ， 因 为 它 对 小 文件 的 压缩 算法 
更 好 ， 且 具有 更 高 级 的 透明 度 支 持 (alpha 透 
明度 ) ， 参 见 图 5.1.2。 


SN 


Farm9, Training 
Podeasts 
5.1.2. ”标志 和 计算 机 生成 的 其 他 图 像 ( 即 只 有 


少数 几 种 颜色 的 图 像 ) 可 通过 ZIP 有 效 地 压缩 ， 
此 通常 保存 为 PNG-8 格式 ( 男 见 彩 插 ) 








2. 颜色 

大 多 数 计算 机 显示 器 可 以 显示 数 以 百 万 计 
的 颜色 ， 但 也 有 例外 的 情况 。 有 的 图 像 格式 的 
调 色 板 是 有 限 的 。GIF 和 PNG-8 图 像 只 能 拥有 
256 种 颜色 ( 对 标志 和 图 标 来 说 这 已 经 够 了 ) 。 

照片 和 复杂 的 插图 应 保存 为 JPEG 或 
PNG-24 格式 ， 因 为 它们 要 在 单 张 图 片 中 包含 
更 多 的 颜色 。 


3. 尺寸 和 分 辨 率 

数字 图 像 以 像素 为 单位 进行 度量 。300 万 
像素 的 数码 相机 可 以 照 出 2048 像素 宽 、1536 
像素 高 的 照片 。 这 有 多 大 呢 ?” 视 情况 而 定 。 
如 果 用 256 ppi ( pixels per inch, 像素 每 英寸 ) 
的 打印 机 打印 图 像 ， 它 的 尺寸 就 是 8 英寸 x6 
英寸 ( 约 20 厘 米 x15 厘米 ) 。 但 如 果 在 网 
页 上 使 用 这 个 图 像 ， 它 的 尺寸 就 取决 于 访问 
者 显示 器 的 分 辩 率 了 ,分 状 率 大 约 为 86 ppi( 可 
能 低 至 约 72 ppi, 或 高 至 约 100 ppi ) ， 这 时 图 


像 将 显示 为 28 英寸 x21 英寸 CA 71 JE x 
53 厘米 ) 。 这 太 大 了 ， 参 见 图 5.1.3。 








5.1.3 ”这 个 图 像 为 2048 像素 宽 。 在 Photoshop F, 
使 用 256 ppi 的 输出 分 辨 率 ， 它 只 有 6 英寸 x8 英 十 
( 约 15 厘米 x 22 厘米 ) 。 而 在 这 里 的 Firefox 中 ， 
分 辩 率 是 由 访问 者 的 显示 器 决定 的 。 假 定 分 辩 率 为 

72 ppi， 该 图 就 有 28 英寸 ( 约 71 厘米 ) 宽 

也 许 ， 最 好 根据 平均 网 页 宽度 考虑 图 像 
的 尺寸 。 由 于 长 期 以 来 1024 像素 x 768 像素 
的 屏幕 分 辩 率 都 是 标准 的 分 辨 率 ， 网 页 设计 
人 员 已 习惯 于 让 页 面 保持 960 像素 宽 ， 从 而 
避免 产生 横向 深 动 条 ， 让 访问 者 可 以 看 到 整 
个 页 面 的 内 容 (参见 图 5.1.4 ) 。 








At a Tibetan Buddhist monastery in northern India, monks beautifully created 
a walkway of stones. 


图 5.1.4. 这 个 图 像 有 500 像素 宽 ， 大 约 为 1024 像 
素 宽 的 浏览 器 窗口 宽度 的 一 半 
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事实 上 ， 已 有 越 来 越 多 的 人 开始 使 用 更 
KWR i (ME, T 85% 的 分 辩 率 大 于 
1024 像素 x 768 像素 ) ， 但 这 并 不 意味 着 人 
们 会 让 单个 浏览 器 窗口 填 满 这 些 更 大 的 显示 
器 。 如 果 不 查看 其 他 的 程序 (或 其 他 的 浏览 
器 窗口 ) ， 在 过 宽 的 浏览 器 中 阅读 文本 是 一 
件 很 累 的 事 。 不 过 ， 仍 有 设计 人 员 倾 向 于 扩 
宽 他 们 的 设计 ， 并 使 用 宽度 灵活 的 设计 ， 让 
内 容 可 随 着 浏览 器 窗口 放大 或 缩小 。 

同时 ， 知 能 手机 和 平板 电脑 的 使 用 已 变 
得 越 来 越 多 ， 因 此 应 该 始终 考虑 屏幕 大 小 和 
受 限 的 下 载 速度 。 

这 里 , 分 辨 率 可 以 代表 两 种 不 同 的 概念 : 
一 个 是 显示 需 或 图 像 中 的 实际 像素 数量 ( 如 
640x480) ,一 个 是 显示 器 或 图 像 上 1 英寸 
的 像素 数量 ( 如 72 或 86 ppi) 。 不 管 怎 样 ， 
DRRR, BRRL, ERE, 像素 可 以 
增加 细节 或 尺寸 。 在 屏幕 上 , 则 总 是 像素 越 多 ， 
图 像 就 越 大 。 


4. 速度 

Web 图 像 与 可 打印 图 像 的 另 一 项 区 别 在 
于 Web 访问 者 必须 等 待 图 像 下 载 ( 试想 等 待 
早报 上 的 图 像 逐 渐 显 现 的 情形 ! ) 。 

如 何 让 下 载 时 间 最 短 呢 ? 最 容易 的 办 法 
就 是 使 用 小 图 像 。 图 像 文 件 越 大 ， 访 问 者 看 
到 它 之 前 所 花 的 时 间 就 越 长 。 

第 二 种 提高 下 载 速率 的 方式 就 是 对 图 像 
进行 压缩 。JPEG 的 强大 之 处 在 于 它 可 以 大 幅 
降低 文件 的 大 小 , 但 JPEG 有 两 个 主要 的 缺点 。 
首先 ， 它 的 压缩 信息 占用 大 量 空间 ， 因 此 不 
适合 小 图 像 。 其 次 ， 它 是 有 损 压 缩 一 一 为 了 
节省 空间 ， 可 能 会 永久 性 地 牺牲 一 些 细节 。 
对 图 像 进 行 解压 也 找 不 回 丢 失 的 数据 。 如 果 
想 在 未 来 某 个 时 候 对 图 像 进行 编辑 ， 就 需要 
用 无 压缩 格式 ( 如 PSD 或 TIFF ) 进行 保存 ， 
直到 编辑 完成 以 后 再 保存 为 JPEG。 























E 











PNG 和 GIF 是 无 损 的 格式 ， 因 此 它们 可 
以 在 保证 质量 的 情况 下 压缩 图 像 。 拥 有 大 片 
单 色 区 域 的 图 像 ( 如 标志 、 显 示 的 文本 、 插 
图 等 ) 最 适合 用 这 两 种 格式 。 此 外 ，PNG 的 
压缩 质量 比 GIF 好 一 些 。 





5. 透明 度 

出 于 两 个 原因 ， 透 明度 很 重要 。 首 先 ， 
使 用 透明 度 将 一 个 图 像 置 于 另 一 个 图 像 的 后 
面 可 以 创建 复杂 的 布局 。 其 次 ， 可 以 利用 透 
明度 为 图 像 创 建 非 矩 形 的 边缘 ， 增 强 页 面 的 
视觉 吸引 力 。PNG 和 GIF 都 支持 透明 度 ， 但 
JPEG 不 支持 。 

在 GIF 格式 中 , 一 个 像素 要 么 是 透明 的 ， 
要 么 是 不 透明 的 。 而 PNG 则 支持 alpha 透明 。 
alpha 透明 既 支 持 全 透明 ， 又 支持 半 透 明 。 这 
意味 着 具有 复杂 透明 背景 的 图 像 使 用 PNG 的 
效果 要 好 于 使 用 GIF 的 效果 ， 因 为 使 用 PNG 
可 以 让 边缘 变 得 平滑 ， 避 人 免 产 生 锯 齿 。 

















6. 动画 

纸 上 永 远 也 看 不 到 的 一 样 东 西 就 是 动画 。 
但 在 万 维 网 上 ， 它 们 随处 可 见 。 动 画 可 以 保 
存 为 GIF ， 但 不 能 是 JPEG 或 PNG。 

在 图 像 内 显示 动画 已 经 用 得 越 来 越 少 了 。 
通常 可 以 使 用 Flash、CSS 动画 和 JavaScript 
创建 动画 。 近 几 年 ， 由 于 iOS 不 支持 Flash, 
H. JavaScript 和 CSS 的 功能 逐渐 变 强 ， 因 此 
万 维 网 上 用 Flash 创建 的 动画 已 经 变 少 了 。 


5.2 ”获取 图 像 


如 何 获 取 可 用 在 网 页 中 的 图 像 呢 ?有 几 
种 方式 。 可 以 购买 或 下 载 现 成 的 图 像 ， 通 过 
扫描 仪 将 照片 或 手绘 图 像 数字 化 ， 使 用 数码 
相机 ， 或 使 用 Adobe Photoshop 这 样 的 图 像 编 
辑 软 件 从 头 绘制 图 像 。 在 有 了 图 像 以 后 ， 就 
可 以 根据 需要 在 万 维 网 上 使 用 它们 了 。 
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获取 图 像 的 手段 

口 可 以 使 用 Google 寻找 万 维 网 上 的 图 
像 , 方法 是 点 击 搜索 框 上 方 的 “图 像 ” 

(Images ) 链接 ， 再 输入 搜索 条 件 ， 
跟 平 党 一样。 关于 图 像 版 权 的 更 多 信 
息 , 参见 后 面 的 “知识 共享 许可 协议 ”。 

OQ 一 般 来 说 ,即使 是 在 网 上 找到 的 免费 图 像 ， 
也 会 受到 某 种 限制 (参见 “知识 共享 许可 
协议 ”) 。 不过， 购买 的 图 像 通常 能 够 以 
任何 方式 使 用 (除了 对 图 像 本 身 再 次 进行 
销售 ) 。 请 仔细 阅读 声明 或 许可 协议 。 

口 很 多 公司 以 较 低 的 价格 销售 库存 的 照 
片 和 图 像 。 通 常 ， 每 张 图 像 都 有 几 个 版 
本 ， 以 满足 不 同 的 目的 和 分 辨 率 要 求 。 

口 扫描 仪 和 数码 相机 是 创建 你 自己 的 图 
像 的 常用 方法 。 




























































































知识 共享 许可 协议 

知识 共享 ( Creative Commons, www.crea- 
tivecommons.org ) 是 一 个 非 营 利 组 织 ， 它 
开发 了 一 个 版 权 模 板 体系 ， 让 艺术 家 可 以 
按照 其 指定 的 方式 分 享 他 们 的 作品 ， 同 时 
无 需 放 弃 对 作品 的 所 有 权利 。 网 站 设计 师 、 
音乐 家 和 摄影 师 使 用 知识 共享 许可 协议 将 
他 们 的 作品 放 入 市 场 ， 而 无 需 担 心 别人 以 
他 们 不 允许 的 方式 利用 这 些 作 品 。 

Flickr 是 流行 的 图 片 分 享 Web 应 用 
(www.flickr.com ) 。 它 要 求 用 户 为 他 们 上 
传 的 每 张 图 片 指定 一 种 知识 共享 许可 协议 。 
Flickr 让 访问 者 可 以 根据 许可 协议 的 类 型 搜 
索 图 片 。 它 是 为 网 站 寻找 图 片 的 好 地 方 。 

使 用 Google 时 ， 可 以 根据 使 用 权限 对 
搜索 进行 限定 (点击 “高 级 搜索 O, RE 
在 “使 用 权限 ”下 拉 菜 单 中 选择 需要 的 选项 )。 











CD 在 新 的 Google 首页 界面 中 ， 























要 先 点 击 右 上 角 的 齿轮 按钮 才能 看 见 “ 高 级 选项 ”。 一 一 译 者 注 


5.3 选择 图 像 编辑 器 


有 很 多 不 同 的 软件 可 以 用 来 创建 和 保存 
Web 图 像 。 大 多 数 现 代 图 像 编 辑 器 都 提供 了 
创建 Web 图像 的 专用 工具 。 这 些 工 作 考 虑 了 
本 章 前 面 讨 论 的 几 种 要 素 。 

ZJE, FERYE Photoshop 和 它 的 

“YT” Adobe Fireworks ( www.adobe.com ) o 
Fireworks 本 身 也 非常 强大 。 它 们 都 既 有 
Macintosh 版 也 有 Windows 版 。 我 用 这 两 个 软 
件 讲解 本 章 的 一 些 技术 。 

不 过 , 需要 强调 一 点 , 无 论 使 用 哪 种 软件 ， 
优化 Web 图 像 的 基本 策略 始终 不 会 改变 。 它 
们 所 用 的 命令 名 称 可 能 有 所 不 同 ， 步 又 也 有 
多 有 少 ， 但 思路 是 一 样 的 。 

有 很 多 程序 可 以 代替 Photoshop, 如 Paint. 
NET (适合 Windows, www.getpaint.net ) 以 及 
Acorn 3X, Pixelmator (适合 Mac, www.pixelmator 






































.com ) 。 同 时 ，Photoshop.com Aviary.com 等 
在 线 编辑 器 也 变 得 越 来 越 强大 。 尽 量 使 用 你 
感觉 最 舒服 的 程序 。 


5.4 保存 图 像 


创建 图像 以 后 ， 要 保存 它们 。 这 一 过 程 
是 在 图 像 的 视觉 质量 与 文件 大 小 之 间 寻 找平 
衡 的 艺术 。 

如 果 你 的 计算 机 上 没有 安装 Photoshop 或 
Fireworks， 可 以 先 使 用 它们 的 试用 版 。 


1. Adobe Photoshop 

Photoshop 在 File 菜单 中 提供 了 Save for 
Web & Devices ( 存储 为 Web 和 设备 所 用 格式 ) 
命令 。 它 让 用 户 可 以 从 视觉 上 对 比 原始 图 像 
和 一 至 三 个 优化 后 的 版 本 ， 还 可 以 看 到 对 文 
件 大 小 和 下 载 时 间 的 影响 。 
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使 用 Photoshop 的 Save for Web & Devices 
的 步骤 

(1) 打开 Photoshop， 创 建 图 像 。 或 者 打 
开 现 有 的 图 像 , 并 通过 剪裁 、 调 整 大 小 和 编辑 ， 
为 发 布 做 好 准备 。 

(2) 选择 File — Save for Web & Devices 

(文件 一 根据 Web 和 设备 保存 ) 。 出 现 
Save For Web & Devices 对 话 框 。 

(3) 点 击 2-Up (2 HX ) 选项 卡 查看 一 个 优 
化 后 的 版 本 ， 或 点 击 4-Up (4 联 ) 选项 卡 查 
看 三 个 优化 后 的 版 本 。 

(4) 根据 需要 ， 点 击 一 个 优化 后 的 版 本 。 

(5) 选择 希望 采用 的 格式 。 
通常 , 在 计算 机 上 创建 的 图 像 ( 包括 标志 、 
横幅 、 线 条 艺术 、 文 本 以 及 任何 包含 由 单 色 
和 锐利 细节 构成 的 大 块 区 域 的 图 像 ) 应 保存 
为 PNG-8 或 GIF 格式 ， 参见 图 5.4.1。 

具有 连续 色调 的 图 像 (如 照片 ) 应 保存 
为 JPEG 或 PNG-24 格式 ,参见 图 5.4.2。 

(6) 调整 其 他 设置 选项 ， 直 到 在 质量 可 接 
受 的 条 件 下 获得 最 小 的 文件 。 

(7) 点 击 Save。 选 择 一 个 目录 ， 并 对 新 文 
件 进行 命名 。 它 将 自动 包含 所 选 格式 的 扩展 
名 ( 而且， 这样 通常 就 不 会 覆盖 原始 图 像 ) 。 





























2. Adobe Fireworks 

Photoshop 是 为 多 种 用 途 设 计 的 ， 而 
Fireworks 则 是 专门 为 创建 Web 图像 设计 的 ( 参 
见 图 5.4.3 和 图 5.4.4) o IE, EX PNG 的 
优化 能 力 要 强 于 Photoshop ， 它 优化 后 的 文件 
更 小 , 但 目前 这 种 差距 已 经 被 填 平 了 。 不 过， 
Fireworks 提供 了 另 一 种 输出 高 质量 PNG 的 选 
项 : PNG-32 格式 。 








(DKÍUGE KB ( 千 字 节 )。 一 一 译 者 注 





要 记 住 ， 你 的 主要 目标 是 在 维持 可 接 
受 的 图 像 质量 的 条 件 下 , 获得 尽 可 能 小 的 文件 。 
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5.4.1 Save for Web & Devices 对 话 框 。 它 显示 
原始 图 像 (左上 ) 和 三 个 可 能 的 压缩 后 的 版 本 。 这 
个 图 像 有 很 多 纯色 ， 还 有 应 该 保持 锐利 的 文本 。 可 
以 看 到 ，PNG-8 格式 (左下 ) 的 压缩 程度 最 高 ， 

压缩 后 不 到 10K", PNG24 可 用 的 颜色 更 多 ， 压 
缩 后 为 3SK。 高 质量 的 JPEG 则 非常 大 。 如 果 将 
JPEG 调整 为 中 等 质量 (未 显示 ) , 也 仍然 比较 大 ， 

还 比较 难看 (53 WE ) 
























































[ | [Preen] eH] 
图 5.4.2 JPEG (左下 ) 的 图 像 质 量 最 好 ， 文 件 也 
最 小 (63K ) 。PNG-8 压缩 只 留 下 了 照片 的 色 带 ( 右 
下 ) ,， 且 文件 大 小 (114K ) 也 几乎 是 JPEG 的 两 倍 。 
PNG-24 (fi E) 可 以 呈现 高 质量 的 图 像 ， 但 文件 
也 大 得 多 (322K) (BUHA ) 
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Original Preview [TJ2-Up [4-Up DB Page 1 


Original: Untitled ~ JPEG (Document, f. 100 quality 
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“m © 541x300 150%, 


图 5.4.3 注意 , PNG-8 图 像 (左下 ) EEH Photoshop 
副本 文件 略 小 一 些 o 而 另 两 种 格式 , 即 JPEG( 右 上 ) 
fll PNG-224 ( 右 下 ) ， 则 大 一 些 〈 另 见 彩 捕 ) 





Original Preview [TJ2-Up [三 4-Up D Page 1 


Original: Untitled ~ PNG (Docus 
313.69K 
50 sec @S6kbps 


JPEG (Document, fe 80 quality 


PNG (Document, f» OX dither 
65. Adaptive palette 
10 sec @56kbps 256 colors 








am © 600x450 100%, 


图 5.4.4 Fireworks 对 图 像 的 优化 效果 明显 好 一 些 ， 
JPEG (左下 ) 、PNG-8 Cr F ) fll PNG-24 (右上 ) 
的 文件 大 小 都 更 小 一 些 。JPEG 和 PNG-8 文件 大 小 
只 有 Photoshop 的 一 半 ( 男 见 彩 插 ) 








应 该 使 用 RGB "模式 创建 图 像 ， 而 不 


是 CMYK“ 模 式 ( 用 于 印刷 ) 。 


如 果 不 确定 应 该 选择 哪 种 格式 ， 可 以 
比较 两 种 优化 结果 ， 看 看 哪 种 格式 的 压缩 效 
果 更 好 。 


PNG-24 是 一 种 强大 的 无 损 格 式 ， 既 
适用 于 计算 机 生成 的 图 像 ， 又 适用 于 “自然 
的 ”彩色 图 像 。 它 通常 比 PNG-8 好 ， 但 不 如 


JPEG., 
如 果 一 个 图 像 拥有 两 种 类 型 的 内 容 ， 
可 以 将 它 分 成 两 块 ， 分 别 进 行 压缩 ， 然 后 用 


CSS 重新 组 装 。 当 然 ， 也 可 以 只 用 一 种 格式 ， 
然后 取 其 最 优 的 格式 。 


Save for Web & Devices 命令 创建 新 的 
图 像 并 保持 原始 图 像 不 变 ， 除 非 以 相同 的 名 
称 和 扩展 名 保存 于 同一 个 文件 夹 下 ， 这 样 就 
可 以 覆盖 旧 文 件 。 


HEO, 


在 优化 后 的 版 本 中 ， 只 保留 图 像 可 见 


5.5 在 页 面 中 插入 图 像 


可 以 在 网 页 中 放置 各 种 各 样 的 图 像 ， 从 标 
志 到 照片 都 可 以 。 只 要 浏览 器 没有 关闭 图 像 显 
示 ， 当 访问 者 进入 你 的 页 面 时 ， 页 面 上 的 图 像 
就 会 自动 显示 出 来 (参见 图 5.5.1 和 图 5.5.2 ) 。 





中 R、G、B 分 别 表示 Red ( 红 )、Green ( 绿 )、Blue ( 蓝 ), RGB 模式 又 称 三 原色 光 模 式 。 一 一 译 者 注 
© C、M、Y、K 分别 表示 Cyan (7 ), Magenta ( 品 红 )、Yellow ( 黄 )、Black ( 8), CMYK 模式 又 称 印 刷 四 分 色 模 式 。 





© 编辑 图 像 时 ， 常 常 


将 图 像 的 不 同 成 分 分 层 排列 。 优 化 后 的 版 本 会 去 除 层 的 信息 。 





一 一 译 者 注 
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«body» 
«h2»Barcelona's Market«/h2» 
«img src-"cornermarket.jpg" /» 


<p>This first picture shows one of the 

— fruit stands in the Mercat de la Boquería, 
— the central market that is just off the 
— Rambles. It's an incredible place, full 
— of every kind of fruit, meat, fish, or 

— whatever you might happen to need. It 

— took me a long time to get up the nerve 
— to actually take a picture there. You 

— might say I'm kind of a chicken, but 

— since I lived there, it was just sort 

— of strange. Do you take pictures of your 
— supermarket?«/p» 


«/body» 
«/html» 











5.5.1 这 个 图 像 的 URL 只 包含 文件 名 ,没有 路 
径 ， 因 此 代表 该 图 像 位 于 与 此 网 页 相同 的 文件 来 
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Fie Edt View Favorites Tools Help 


Fa Favorites | g Barcelona's Market | A- 





Barcelona's Market 











This first picture shows one of the fruit stands in the 
Mercat de la Boqueria, the central market that is just 

off the Rambles. It's an incredible place, full of every 

kind of fruit, meat, fish, or whatever you might happen y 





在 页 面 中 插入 图 像 的 步骤 

(1) Æ HTML 代码 中 ， 将 光标 放 在 希望 图 
片 出 现 的 位 置 。 

(2) 输入 «img src="image.ur1"， 其 中 
image. url 指示 图 像 文件 在 服务 器 上 的 位 置 。 

(3) 输入 一 个 空格 和 />。 


GHES 图 像 必须 先 上 传 到 服务 器 上 ， 访 问 者 
才 有 可 能 看 到 它们 。 


SE 不 要 期 望 你 的 访问 者 会 长 时 间 等 待 页 
面 加 载 和 显示 。 可 以 对 页 面 进 行 测 试 (AS 
了 你 的 连接 速度 可 能 比 访 问 者 的 快 ) 。 如 果 
你 都 等 不 下 去 ,那么 访问 者 也 一 样 等 不 下 去 。 
另 一 种 办 法 是 为 大 图 创建 缩 略图 ， 让 访问 者 
可 以 通过 链接 选择 查看 大 图 。 


有 一 个 已 经 废弃 的 border 属性 
(border="n", 其 中 nn 是 以 像素 为 单位 的 宽度 )， 
它 可 以 在 图 像 周 围 添加 或 去 除 边框 (特别 是 
去 除 链 接 图 像 周 围 自动 出 现 的 边框 ) 。 更 好 
的 方法 是 使 用 样式 表 控 制图 像 的 边框 以 及 所 
有 其 他 的 方面 。 


5.6 ”提供 替代 文本 


如 果 访 问 者 使 用 较 大 的 屏幕 和 较 快 的 网 
络 ， 图 像 可 能 效果 很 好 ,但 对 于 手持 设备 、 
手机 用 户 ， 连 接 速度 慢 的 用 户 以 及 育 人 ， 效 
果 就 不 那么 好 了 , 甚至 可 能 导致 明显 的 问题 。 
可 以 为 图 像 添加 一 段 描述 性 文本 ， 当 图 像 出 
于 某 种 原因 不 显示 的 时 候 ， 就 将 这 段 文字 显 
示 出 来 。 同时 , 屏幕 阅读 器 可 以 朗读 这 些 文本 。 























提供 图 像 无 法 显示 时 的 替代 文本 的 步骤 





图 5.5.2 图 像 贴 向 页 面 的 左 侧 ， 与 文本 的 对 齐 方 
式 一 致 。 使 用 float ( 参见 11.10 节 ) 等 CSS 属性 
可 以 改变 对 齐 方 式 或 让 文字 环绕 图 像 




















(1) Æ img 标记 内 ,在 src 属性 及 其 值 的 
后 面 ， 输入 alt=" o 
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(2) 输入 图 像 出 于 某 种 原因 没有 显示 时 应 
该 出 现 的 文本 (参见 图 5.6.1 和 图 5.6.2 ) 。 
(3) 输入"。 





<body> 
<h2>Barcelona's Market</h2> 


«img src-"cornermarket.jpg" alt="Fruit Stand 
>in Market" /> 


<p>This first picture shows one of the 

— fruit stands in the Mercat de la Boquería, 
— the central market that is just off the 
— Rambles. It's an incredible place, full 
— of every kind of fruit, meat, fish, or 
— whatever you might happen to need. It 

— took me a long time to get up the nerve 
— to actually take a picture there. You 

— might say I'm kind of a chicken, but 

— since I lived there, it was just sort 

— of strange. Do you take pictures of your 
— supermarket?«/p» 








«/body» 
</html> 
图 5.6.1 尽管 从 理论 上 说 ,替代 文本 的 长 度 没有 











限制 ， 但 大 多 数 浏 览 器 不 会 为 其 进行 自动 换行 。 
此 ， 应 尽量 让 替代 文本 少 于 50 个 字符 





Barcelona's Market - Windows Internet E... DEAR) 





D e 团 








File Edit View Favorites Tools Help 





F Favorites | K Barcelona's Market | | A- 
Barcelona's Market 
x| Fnit Stand in Market 


This first picture shows one of the fruit stands in the 
Mercat de la Boqueria, the central market that is just 
off the Rambles. It's an incredible place, full of every =| 








5.6.2 1E Internet Explorer 中 ， 替 代 文 本 出 现在 
一 个 带 红 又 的 小 方块 旁边 。 在 其 他 浏览 器 中 ， 替 代 
文本 是 单独 出 现 的 











在 HTML5 F, img 元 素 必须 包含 alt 
属性 。 
JAWS 等 屏幕 阅读 器 可 以 将 替代 文本 


朗读 出 来 ， 这 样 育 人 或 视 障 人 士 就 可 以 了 解 
图 像 的 大 致 内 容 了 。 


如 果 图 像 与 非 可 视 用 户 无 关 ，W3C 建 
议 设置 alt=""。 如 果 图 像 有 标题 ， 或 周围 的 文 
本 可 以 准确 地 描述 图 像 ， 也 可 以 让 alt 留 空 。 


5.7 ”指定 图 像 尺寸 


有 时 ， 加 载 网 页 会 先 看 到 文本 ， 等 一 小 
段 时 间 以 后 图 片 开始 加 载 时 ， 文 本 跳 到 图 片 
AR, 留 出 可 容纳 图 片 的 空间 。 出现 这 种 现象 ， 
是 因为 在 HTML 中 没有 指定 图 像 的 尺寸 。 

Apa Vds e f A BHRI HTML. 代码 时 ， 
必须 加 载 图 片 ， 从 而 了 解 它 有 多 大 ， 需 要 为 它 
留 出 多 大 的 空间 。 如 果 指 定 图 像 的 尺寸 ， 浏览 
器 就 可 以 预 留 空间 ， 在 图 像 加 载 的 同时 让 文本 
显示 在 周围 ， 保 持 布 局 的 稳定 。 可 以 通过 浏览 
器 或 图 像 编辑 软件 获取 图 像 的 精确 尺寸 。 

浏览 器 还 会 根据 在 HTML (或 CSS) 中 
指定 的 尺寸 ， 对 图 像 进 行 放大 或 缩小 。 如 果 
你 想 在 不 同 的 环境 使 用 同一 张 图 片 ， 就 可 以 
利用 这 一 特性 。 不 过 ， 如 果 对 图 像 文 件 进行 
了 编辑 , 改变 了 它 的 尺寸 ,要 注意 更 新 代码 。 


1. 在 浏览 器 中 查看 图 像 尺 十 

(1) 在 图 像 上 右 击 ， 出 现 背 景 弹出 菜 
参见 图 5.7.1。 

(2) 选择 Properties ( 属性 ) 或 View Image 
Info ( 查看 图 像 信息 ) ( 具体 选项 取决 于 所 使 
用 的 浏览 器 ) ， 参 见 图 5.7.1， 出 现 的 框 中 会 以 
像素 为 单位 显示 图 像 的 尺寸 ， 参见 图 5.7.2。 
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Barcelona's Market 


View Image 
Copy Image 
Copy Image Location 


Save Image As... 

Send Image... 

Set As Desktop Background... 
ME 


Web Developer 


"iP Inspect Element 











图 5.7.1 在 浏览 器 中 的 图 像 上 右 击 ， 出 现 背景 弹 
出 菜单 。 浏 览 器 会 提供 审查 图 像 ， 显 示 其 属性 ， 或 
获取 其 尺寸 的 方式 

















Type: JPEG Image 

Size: Unknown (not cached) 
300px x 399px 

Fruit Stand in Market 


Dimensions: 
Associated Text: 











5.7.2 这 个 框 ( 它 的 外 观 取决 于 所 
以 像素 为 单位 显示 了 图 像 的 尺寸 


的 浏览 器 ) 








2. 在 Photoshop 中 查看 图 像 尺寸 

(1) 在 Photoshop 中 打开 图 像 。 

(2) 让 文档 窗口 具有 足够 的 宽度 ， 直 到 能 
在 左下 边沿 看 见 文档 信息 栏 。 

(3) 5 点 击 文档 信 ， 息 =, 2 会 出 现 一 个 显示 图 
像 信息 的 小 方 框 ， 其 中 包括 图 像 的 尺寸 ， 参 
见 图 5.7.3, 





@ © O | cornermarket.jpg @ 100% (RGB/8#) 
EE * = 





Tile Width: 300 pixels 
Tile Height: 399 pixels 















5.7.3 - 档 窗口 底部 的 


在 Photoshop 中 ， 点 击 文 
文档 信息 栏 ， 就 可 以 查看 图 像 的 属性 ( 如 果 没 有 显 
示 文 档 信息 栏 ， 就 把 窗口 拉 宽 一 些 ) 


























3. 在 HTML 中 指定 图 像 尺寸 
(1) 使 用 “在 浏览 器 中 查看 图 像 尺 寸 ” 或 
“在 Photoshop 中 查看 图 像 尺 寸 ” 中 介绍 的 方 

法 ,确定 图 像 的 尺寸 。 

(2) 在 img 标记 中 ，src 属性 的 后 面 ， 输 
入 width="x”height="y"， 采 用 第 (1) 步 中 确 
定 的 值 ， 以 像素 为 单位 指定 x 和 yy (分 别 代表 
图 像 的 宽度 和 高 度 ) 的 值 。 














«body» 
«h2»Barcelona's Market«/h2» 


«img src-"cornermarket2.jpg" alt-"Fruit Stamd 
— in Market" widthz"300" heightz"399" /> 


<p>This first picture shows one of the 

— fruit stands in the Mercat de la Boquería, 
— the central market that is just off the 
— Rambles. It's an incredible place, full 
— of every kind of fruit, meat, fish, or 
— whatever you might happen to need. It 

— took me a long time to get up the nerve 
— to actually take a picture there. You 

— might say I'm kind of a chicken, but 

— since I lived there, it was just sort 

— of strange. Do you take pictures of your 
> supermarket?«/p» 


«/body» 
«/html» 











图 5.7.4 如 果 明 确 指定 以 像素 为 单位 的 高 度 和 宽 
度 ， 浏览 器 就 不 必 花 时 间 判 断 图 像 的 尺寸 ， 从 而 更 
快 地 将 图 像 显 示 出 来 





width 和 height 属性 不 一 定 要 反映 图 
像 的 实际 尺寸 。 


ED 如 果 有 几 个 尺寸 相同 的 图 像 ， 可 以 通 
过 样式 表 同 时 设置 它们 的 高 度 和 宽度 。 


X Ba. A 栏 中 看 到 图 像 的 尺寸 ， 
参见 图 5.7.4 和 图 5.7.5, 
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在 Photoshop 或 Fireworks 中 ， 可 以 选 € 
: hi»Stupas«/h1» 
^ x B. s P 
中 整个 图 像 ， 再 在 Info (信息 ) 面板 中 查看 | Spa daseoot pa jpg" altz"Two Stupas" 
图 像 的 尺寸 。 — width-"220" height-"170" /> 
«p»These stupas in Yunnan, China, are 
— Buddhist monuments used as a place for 
cornermarket.jpg (PEG Image, 300x399 pixels) — worship.«/p» 
< a cornermarket.jpg (JPEG Image, ... L | > + 
(Qe [eJ (C Go to a Web Site Pv | (SH cooqgQ ) | 本 | 








5.7.5 “如果 直接 在 浏览 器 (这 里 是 Windows 上 
的 Firefox ) 中 打开 图 像 ， 就 会 在 标题 栏 里 显示 图 
像 的 尺寸 


5.8 ”在 浏览 器 中 改变 图 像 的 尺寸 
通过 为 图 像 指定 新 的 高 度 和 宽度 ( 以 像 





素 为 单位 ) ， 可 以 改变 图 像 显 示 的 尺寸 ， 参 
见 图 5.8.1, AI 5.8.2 和 图 $.8.3。 不 过 ， 最 好 


还 是 以 原始 尺寸 显示 图 像 。 





























5.8.1 这 个 图 像 的 原始 尺寸 为 440 像素 x341 
像素 ， 这 在 页 面 上 显得 太 大 了 


5.8.2 ”调整 height 和 width 属性 ， 并 确保 比例 
不 变 。 在 这 个 例子 中 ，height 和 width 都 只 有 原来 
的 一 半 





These stupas in Yunnan, China, are Buddhist monuments used as a 
place for worship. 








| 
5.8.3 ”显示 的 图 像 只 有 原 图 的 一 半 大 小 。 不 过 

注意 ， 加 载 它 需要 花 的 时 间 跟 以 前 是 一 样 的 。 毕 
竞 ,， 用 的 是 同一 个 文件 

浏览 器 使 用 的 改变 图 像 尺 寸 的 方法 并 不 
比 Photoshop 或 其 他 图 像 编 辑 器 的 方法 先进 ， 
此 要 对 结果 进行 测试 。 

为 减少 加 载 时 间 ， 可 以 通过 在 HTML 或 
CSS 中 调整 高 度 和 宽度 改变 图 像 的 大 小 。 不 
过 要 注意 ， 如 果 将 图 像 调 得 过 大 ， 就 会 显得 
粗糙 难看 。 


在 浏览 器 中 改变 图 像 尺 寸 的 步骤 
(1) 输入 <img src-"image.url", 
image.url 是 图 像 在 服务 器 上 的 位 置 。 


其 中 
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(2) 输入 width-"x" height-"y", JẸ} x 
和 上 分别 是 希望 设 定 的 宽度 和 高 度 ( 以 像素 
为 单位 ) 。 

(3) 根据 需要 , 添加 任何 其 他 的 网 像 属性 ， 
最 后 输入 />。 


在 第 (2) 步 中 ， 也 可 以 使 用 百分数 。 
该 数 的 基准 是 浏览 器 窗口 的 大 小 (而 不 是 原 
始 图 像 尺寸 ) 。 


使 用 width fe height 属性 是 改变 图 像 
在 网 页 上 显示 尺寸 的 一 种 快捷 但 不 优雅 的 方式 。 
由 于 文件 本 身 并 未 改变 ,访问 者 实际 上 是 被 欺 
骗 了 。 显 示 缩 小 的 图 像 与 原 图 相 比 要 花 去 更 多 
的 下 载 时 间 ; 放大 显示 的 图 像 则 会 变 得 粗糙 。 
更 好 的 方案 是 使 用 图 像 编 辑 器 修改 图 像 的 尺寸 。 


可 以 只 设置 width 或 只 设置 height， 
让 浏览 器 按 比例 自动 调整 另 一 个 值 。 


5.9 在 图 像 编 辑 器 中 改变 图 像 
的 尺寸 


大 多 数 图 像 对 网 页 来 说 都 太 大 了 。 一 幅 
用 于 打印 的 图 像 可 能 有 1800 像素 宽 ( 以 300 
dpi2 打 印 ， 有 6 英寸 宽 ， 约 15 厘米 ) ， 而 用 
于 网 页 的 图 像 很 少 需要 超过 600 像素 ， 通 常 
仅 为 200 像素 左右 。 

当 你 需要 将 图 像 变 大 时 ， 应 寻找 更 大 的 
原始 图 像 ， 再 用 图 像 编辑 器 将 它 缩小 到 合适 
的 尺寸 。 即 使 没 法 做 到 这 样 ， 使 用 图 像 编 辑 
器 将 图 像 变 大 也 比 使 用 浏览 器 的 效果 更 好 。 
不 过 ， 这 样 会 增加 图 像 文件 的 大 小 ， 让 页 面 
加 载 时 间 变 长 。 








用 Photoshop 改变 图 像 尺寸 

(1) 在 Save for Web & Devices 窗口 右 下 角 
的 Image Size 部 分 , 点 击 W ( 宽度 ) 框 或 H( 高 
BE) 框 ， 如 图 5.9.1 所 示 。 

(2) 以 像素 为 单位 输入 宽度 或 高 度 ， 或 输 
入 百分数 , 再 按 一 下 Tab 键 , 改变 图 像 的 尺寸 ， 
如 图 5.9.2 所 示 。 

(3) 可 以 继续 调 大 或 调 小 , 直到 满意 为 止 。 
在 按 下 Save 之 前 ， 图 像 不 会 重新 取样 。 


Se for Woh Devices AR). oo 






































图 5.9.1 原始 图 像 是 用 笔者 的 数码 相机 在 默认 设 
置 下 拍摄 的 ， 其 尺寸 为 2048 像素 x 1536 像素 ， 即 
便 对 于 四 个 浏览 器 窗口 ， 也 仍然 很 大 。 在 压缩 为 高 
质量 JPEG 时 ， 图 像 文件 有 211.3K 
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图 5.9.2 在 W 框 中 输入 新 的 宽度 400 像素 ， 再 点 





ili Apply (应 用 ) 。 缩 小 后 的 图 像 在 页 面 中 很 合适 ， 
以 768 KB/S 的 速率 下 载 ， 只 需要 1 秒 ( 如果 用 更 
快 的 连接 ， 时 间 会 更 短 ) 





CD dpi 即 dots per inch ( 点 每 英寸 )， 指 打印 机 在 每 英寸 打印 的 点 数 。 一 一 译 者 注 
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在 进入 Save for Web & Devices 之 前 ， 
也 可 以 通过 Image (图 像 ) 菜单 下 的 Image 
Size ( 图 像 大 小 ) 命令 改变 图 像 的 尺寸 。 记 住 ， 
Resolution (分辨 率 ) 框 是 无 关 的 ( 它 指 的 是 
dp d APEX, Ede Web 上 不 是 由 设计 人 员 或 
Photoshop 决定 的 ， 而 是 由 访问 者 的 显示 器 决 
定 的 ) 。 相 反 ， 图 像 的 尺寸 是 由 像素 的 数量 
决定 的 。 需 要 选择 Resample Image( 重新 取样 ) 
框 ， 这 样 才 能 改变 图 像 的 尺寸 〈 而 不 是 它 的 
Aa BE), 

减 小 图 像 尺 寸 的 另 一 个 好 办 法 是 将 图 
像 上 不 需要 的 区 域 裁剪 掉 。 


5.10 ”为 网 站 添加 图 标 


出 现在 地 址 栏 、 标 签 页 和 书签 上 小 图 标 
称 为 favicon。 这 个 词 是 favorites icon ( 收藏 
夹 图 标 ) 的 简称 。 

苹果 设备 (iPhone, iPod touch 和 iPad ) 
的 主 界面 要 求 更 大 尺寸 的 图 标 ， 推 荐 尺寸 为 
114 像素 x 114 像素 。 不 要 为 添加 炫丽 的 圆 角 、 
阴影 和 反射 光泽 感到 担心 ， 这 些 设备 的 操作 














系统 会 自动 进行 处 理 。Android 操作 系统 也 文 
持 这 些 图 标 。 


为 网 站 添加 图 标 

(1) 创建 一 个 16 像素 x 16 像素 的 图 像 ， 
并 保存 为 ICO 格式 ， 如 图 5.10.1 所 示 。 也 可 
以 保存 为 PNG 和 GIF 格式 。 

(D 为 触 屏 设备 创建 一 个 114 像素 x114 
像素 的 图 像 ， 并 保存 为 PNG 格式 。 

(3) 在 HTML5 文档 的 head 部 分 ， 输 入 
«link rel="shortcut icon" href="favicon. 
ico" /», 其 中 favicon. ico 是 服务 器 上 图 标的 
名 称 和 位 置 。 如 果 图 像 为 PNG， 则 输入 <link 











rel-"icon" type-"image/png" href-"favicon. 
png”/>。 如 果 图 像 为 GIF， 则 输入 «link 
rel-"icon" type-"image/gif" href="favicon. 





gif" />。 

(4) TE HTMLS 文档 的 head 部 分 ， 输 入 
«link rel-"apple-touchicon" href="/apple- 
touch-icon.png" /», MrP apple-touch-icon. 
png 是 服务 右上 图 标的 名 称 和 位 置 。 














图 5.10.1 在 现实 环境 中 ，favicon 比 这 里 显示 的 
要 小 。 它 们 只 有 16 像素 x 16 像素 











通常 应 将 favicon 保存 为 ICO 格式 ( 参 
JL 图 5.10.2 和 图 5.10.3) 。Photoshop 中 有 
一 个 很 有 用 的 创建 ICO 格式 图 标的 插件 ， 它 
是 由 Telegraphics 制作 的 ( www.telegraphics. 
com.au/sw/ ) 。 





«head» 
«meta charset-"utf-8" /» 
«title»Farm Training Podcasts«/title» 
«link rel-"shortcut icon" 
> hrefz"/favicon.ico" /> 
«link rel-"apple-touch-icon" 
^ href-z"/apple-touch-icon.png" /> 


«/head» 














5.10.2 ”如 果 将 文件 命名 为 favicon.ico 和 apple- 
touch-icon.png 并 将 它们 放 在 网 站 的 根 目录 下 ， 即 
使 没有 这 个 link 元 素 ， 大 多 数 浏 览 器 也 会 显示 
它们 
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Farm Training Podcasts 














| Farm Training Podcasts $ ik 
«4,-ja [se WWW ' v| 是 - coo 4 o. 
"ec Ps 
Podcasts 
Welcome! 
Welcome to the Farm Training Podcasts 
5.10.3 favicon 通常 用 于 地 址 栏 、 收 藏 夹 和 上 
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签 菜 单 、 标 签 页 。 由 于 浏览 器 通常 将 图 标 显示 在 灰 
色 或 其 他 颜色 的 背景 上 ， 因 此 可 能 要 将 图 标的 背景 
改 为 透明 的 

也 可 以 将 favicon 保存 为 PNG 和 GIF 
格式 。 一 定 要 在 type 中 使 用 正确 的 MIME” 
类 型 。 





MIME HJ! Multipurpose Internet Mail Extension ( 多 月 


标准 。 一 一 译 者 注 


Internet Explorer 原来 要 求 将 favicon. 


ico ye 站 的 根 目 录 。 现 在 已 经 没有 这 个 要 


5.10 
RT, RH, eR 
会 查看 这 个 位 置 


图 5.10.4 
主屏 幕 上 时 ， 

















j 途 互联 网 邮件 扩展 )， 











RAA link 元 素 ， 浏 览 器 仍 
(参见 图 5.10.4) 。 


FT Podcast 


在 iOS 设备 中 ,将 网 站 从 Safari 添加 到 
就 会 用 








到 apple-touch-icon 








间 定 内 容 数 据 类 型 的 互联 网 





是 用 于 


第 6 章 








本 章 内 容 

口 链接 剖析 

口 创建 指向 另 一 个 网 页 的 链接 
a 创建 锚 

a 链接 到 特定 的 锚 

口 创建 其 他 类 型 的 链接 











链接 是 万 维 网 的 命脉 。 没 有 它们 ， 每 个 
页 面 都 只 能 独立 存在 ， 同 其 他 所 有 页 面 完 全 


地 分 开 。 


6.1 链接 剖析 


链接 有 两 个 主要 的 部 分 : 目标 和 标签 。 
可 以 说 ， 第 一 个 部 分 目标 ( destination ) 是 最 
重要 的 部 分 。 使 用 它 指定 访问 者 点 击 链接 时 
会 发 生 什 么 。 可 以 创建 链接 进入 另 一 个 页 面 ， 
在 页 面 内 跳 转 ， 显 示 图 像 ， 下 载 文件 ， 发 送 
电子 邮件 ， 等 等 。 不 过 ， 最 常见 的 是 连接 到 
其 他 网 页 的 链接 ( 参见 图 6.1.1) ， 以 及 连接 
到 其 他 网 页 特定 位 置 ( 称 为 锚 ,anchor ) 的 链接 。 
a URL (参见 第 1 章 ) 定义 的 ， 

党 只 能 在 (桌面) 浏览 器 的 状态 栏 中 看 到 。 

链接 的 第 二 个 部 分 是 标签 (label) ， 即 
访问 者 在 浏览 器 中 看 到 或 在 屏幕 阅读 器 中 听 
到 ， 通 过 激活 可 以 到 达 目 标的 部 分 。 它 可 以 
是 文本 、 网 像 或 二 者 兼 有 。 对 于 标签 的 文本 ， 


















































浏览 器 通常 默认 显示 为 带 下 划 线 的 蓝 色 文字 。 
通过 CSS 可 以 很 容易 地 改变 这 一 样式 。 


























N 
UO 
TT 
O 























6.1.1. 有 的 页 面 有 很 多 指向 其 他 页 面 的 链接 。 
有 的 页 面 只 有 一 个 链接 。 也 有 的 页 面 没 有 任何 链接 
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注意 ， 人 们 篆 说 用 户 点 击 链接 ， 好 像 在 
对 页 面 进行 导航 时 鼠标 是 无 处 不 在 的 。 不 过 ， 
我 会 尽量 避免 这 个 词 ， 改 用 和 触发、 激活 ， 以 
反映 用 户 与 链接 交互 的 方式 的 多 样 性 。 例如， 
触 屏 设备 ( 如 大 多 数 智能 手机 和 平板 电脑 ) 
用 户 通 过 轻 触 激活 链接 ， 而 其 他 移动 用 户 可 
能 通过 轨迹 球 激活 链接 。 同 时 ， 有 的 用 户 用 
键盘 对 页 面 进行 导航 ， 无 论 是 出 于 偏好 还 是 
出 于 需要 。 他 们 可 能 有 一 些 肢 体 障 碍 ， 使 用 
鼠标 、 数 码 笔 或 类 似 的 设备 有 一 定 困 难 或 完 
全 无 法 做 到 。 这 些 用 户 通常 通过 Tab 键 找到 
链接 ( 使 用 Tab 键 向 前 移动 ， 使 用 Shift + Tab 
键 向 后 移动 ) ， 再 通过 Enter 或 Return 键 触 发 
链接 。 


6.2 创建 指向 另 一 个 网 页 的 
链接 


如 果 你 有 多 个 网 页 ， 那 么 很 可 能 希望 创 
建 从 一 个 页 面 到 另 一 个 页 面 (以 及 返回 ) 的 
链接 (参见 图 6.2.1 ~ 图 6.2.4 ) 。 还 可 以 链接 
到 其 他 网 站 的 页 面 ， 无 论 是 你 自己 制作 的 还 
是 由 他 人 创建 的 (参见 图 6.2.5 ~ 图 6.2.8 ) 。 

































































1. 创建 指向 另 一 个 网 页 的 链接 

(1) 输入 <a href="page.htm1">， 其 中 
page.html 是 目标 网 页 的 URL， 如 图 6.2.1 
所 示 。 

(2) 输入 标签 文本 ， 也 就 是 默认 突出 显示 
的 文本 ， 如 图 6.2.2 所 示 ， 访 问 者 激活 它 时 ， 
就 会 转 到 第 (1) 步 中 所 指 的 页 面 。 也 可 以 添加 
一 个 img 元 素 蔡 代 文 本 (或 同文 本 一 起 ) 作 
为 标签 。 ( 参见 图 6.5.1， 以 及 65 节 中 的 “将 
缩 略图 链接 到 图 像 ”。) 

(3) 输入 </a> 结束 对 链接 的 定义 。 














«body» 


«article» 
«hi»Cookie and Woody«/hi» 


«img src-"img/cookiefora.jpg" width-"143" 
— height-"131" alt-"Cookie" /» 


«img src-"img/woodygran.jpg" width-"202" 
— height-"131" alt-"Woody" /> 


«p»Generally considered the sweetest 

— and yet most independent cats in the 
><a hrefz"pioneer-valley.html"» 

— Pioneer Valley«/a», Cookie and Woody 
— are consistently underestimated by 

— their humble humans.«/p» 





























«article» 
«/body» 
</html> 
E 6.2.1 由 于 在 href 属性 中 只 有 文件 名 (没有 路 





径 ) , Xf pioneer-valley.html 必须 与 包含 这 个 链 
接 的 网 页 位 于 同一 个 目录 。 和 否则 ， 当 用 户 激活 该 链 
接 时 ， 浏 览 器 将 找 不 到 pioneer-valley.html 








Creating a Simple Link - Mozilla Firefox - [cj xj 
File Edit view History Bookmarks Tools Help 
| L Creating a Simple Link | + E 





Cookie and Woody 





Generally considered the sweetest and yet most independent 


cats in the PioneernValley, Cookie and Woody are consistently 
underestimated by lei humble humans 





http://bruceonthe...oneer-valley.htrnl 


图 6.2.2 WPA IRSE BE CHECK RC Vn, 
默认 显示 为 带 下 划 线 的 蓝 色 文 字 ) 时 ， 目 标 URL 
会 显示 在 状态 栏 中 。 可 以 通过 CSS 改变 这 个 默认 
样式 。 如 果 用 户 激活 该 链接 …… (参见 图 6.2.3 ) 
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?) The Pioneer Valley - Mozilla Firefox | zJal xj 
Ele Edit View History Bookmarks Tools Help 
| |_ | The Pioneer Valley TO - 





The Pioneer Valley 


Located in Northwestern Massachusetts, the Pioneer Valley is 
home to five colleges, including Amherst, Hampshire, Smith, 
Mount Holyoke, and the University of Massachusetts. 





Q2 aes 与 这 个 目标 URL 相关 联 的 页 面 就 会 
显示 在 用 户 的 浏览 絮 中 








2. HTML5 的 块 级 链接 

HTMLS 几乎 允许 在 链接 内 包含 任何 类 
型 的 元 素 或 元 素 组 (参见 图 6.2.4) 。 例 如 
有 段落、 列表、 整 篇 文章 和 区 块 一 一 几乎 任何 
元 素 都 行 ， 交互 式 的 内 容 除 外 ， 如 其 他 链 
接 、audio、video、 表 单元 素 、iframe 等 。 
通过 使 用 HTML 验证 器 对 页 面 进行 测试 (人参 
见 20.5 节 ) 以 防止 链接 中 出 现 不 允许 包含 的 
元 素 。 

















<body> 


短语 ( 如 em、strong、cite 等 ) 的 元 素 (在 
HTMLS 中 属于 短语 内 容 ) 。 

有 趣 的 是 ， 尽 管 在 以 前 的 HTML 规范 中 
块 级 链接 是 不 允许 的 ， 但 浏览 器 都 支持 。 这 
意味 着 你 现在 就 可 以 使 用 它们 ， 而 且 它 们 在 
旧 的 浏览 器 和 现代 浏览 硕 中 均 能 正常 工作。 
不 过 ， 使 用 它们 的 时 候 也 要 小 心 ( 参 见 图 
6.2.4 和 图 6.2.5) 。 














«body» 


«a href-"pioneer-valley.html"» 
«article» 
«hi»Cookie and Woody«/hi» 


«img src-"img/cookiefora.jpg" width= 
^ "143" height-"131" alt-"Cookie" /> 


«img src-'img/woodygran.jpg" width= 
— "202" height-"131" alt-"Woody" /> 


«p»Generally considered the sweetest 
and yet most independent cats 

— in the Pioneer Valley, Cookie 

— and Woody are consistently 

— underestimated by their humble 

^ humans.«/p» 












































«/article» 
«a href-"giraffe-escapes.html"» </a> 
<hgroup> 
«hi»Giraffe Escapes from Zoo«/hi» Ur 
«h2»Animals worldwide rejoice«/h2» «/body» 
«/hgroup» </html> 
</a> 
图 6.2.5 不 过 做 过 了 头 。 要 避免 这 里 显示 的 情况 ， 
E 链接 包含 了 一 大 块 内 容 。 尽 管 这 个 链接 仍然 起 作 
WIR 用 ,在 HTMLS 里 也 是 合法 的 ， 但 屏幕 阅读 器 可 能 
会 反复 朗读 全 部 内 容 ， 即 使 很 多 链接 信息 不 是 访 
图 6.2.4 这 种 类 型 的 链接 在 以 前 的 HTML 版 本 中 问 者 通常 想 听 到 的 。 最 好 让 链接 只 包含 最 相关 的 


是 不 允许 的 ,但 HTMLS5 允许 这 样 做 


这 些 块 级 链接 (block-level link， 非 官方 
称谓 ) 是 同 HTML 早期 版 本 有 巨大 差异 的 地 
方 。 在 以 前 的 HTML 中， 链接 中 只 能 包含 文 
本 、 图 像 等 所 谓 的 行内 元 素 ， 也 即 标记 文本 











内 容 


有 一 些 可 访问 性 方面 的 注意 事项 ， 特 别 
涉及 不 同 的 屏幕 阅读 器 如 何 处 理 块 级 链接 的 
问题 。 无 障碍 访问 专家 Derek Featherstone 和 
Steve Faulkner 的 文章 深入 探讨 了 这 个 问题 ， 
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参见 http://simplyaccessible.comyarticle/htm15- 
block-links/ 和 www.paciellogroup.com/blog/ 
2011/06/html5-accessibilitychops-block-links/ 
他 们 建议 将 最 相关 的 内 容 放 在 链接 的 开头 ， 
而 且 不 要 在 一 个 链接 中 放 入 过 多 内 容 。 
Featherstone 指出 ， 随 着 屏幕 阅读 絮 和 浏览 带 
逐渐 开始 官方 文 持 块 级 链接 ， 可 访问 性 问题 
可 能 只 是 暂时 的 。 
一 般 来 说 ， 用 的 最 多 的 还 是 第 一 个 例子 

(图 6.1.1) 那样 简单 、 传 统 的 链接 样式 ， 不 
过 也 要 知道 ， 制 作 精 巧 的 块 级 链接 也 是 用 得 
上 的 。 














href 指 hypertext reference ( 超 文本 
5] 用 ) o 
CES 可 以 改变 标签 文本 的 默认 样式 ( 参见 


第 10 章 ) ， 其 至 可 以 用 图 像 作 为 标签 ( 参见 
6:5 P) 


ED 通常 ， 对 指向 站 内 网 页 的 链接 使 用 相 
对 URL， 对 指向 其 他 网 站 页 面 的 链接 使 用 绝 
对 URL。 更 多 信息 参见 1.7 节 。 


指向 另 一 个 网 站 的 页 面 的 链接 可 能 是 
这 样 的 : «a hrefz"http://www.site.com/ 
directory/page.html" rel="external"> 
Label text</a> (参见 图 6.2.6、 图 6.2.7 和 图 
6.2.8) . rel 属性 是 可 选 的 ， 即 便 没有 它 ， 链 
接 也 能 照常 工作 。 它 描述 包含 链接 的 页 面 和 
链接 指向 的 页 面 之 间 的 关系 。 它 也 是 另 一 种 
提升 HTML 语义 化 程度 的 方式 。 搜 索引 擎 也 
可 以 利用 这 些 信息 。 下面 的 地 址 维护 了 一 个 
持续 更 新 的 rel 值 的 列表 : http://microformats. 
org/wiki/existing-rel-values o 





«body» 


«article» 
<h1>The Glory of Cats«/hi» 


<p><a hrefz"http://en.wikipedia.org/ 
 wiki/Cat" rel-"external" 
title-"Cat 

— entry on Wikipedia"»Cats«/a» are 

— wonderful companions. Whether it's a 
— bottle cap, long string, or your legs, 
— they always find something to chase 

— around.«/p» 


<p>In fact, cats are so great they even 
> have «a hrefz"http://www.catsthe 
 musical.com/" relz"external" 
> title-"Official site of Andrew 
— Lloyd Webber's musical"»their own 
— musical«/a». It was inspired by T.S. 
> Eliot's «cite»0ld Possum's Book of 
— Practical Cats«/cite».«/p» 

«article» 


«/body» 
«/html» 








6.2.6 如果 创 建 指向 其 他 网 站 的 链接 ， 需 要 使 

用 由 http:/、 服 务 器 、 完 整 路 径 和 文件 名 构成 的 绝 
XÍ URL, rel 和 title 属性 是 可 选 的 ， 但 推荐 使 用 
rel-"external" 指示 这 是 一 个 指向 其 他 网 站 的 链接 
(关于 cite 元 素 ， 参 见 第 4 章 ) 











































Creating a Link to Another Site = Mozilla Firefox 


Ele Edt View History Bookmarks Tols Help 


E 3 





| |. | Creating a Link to Another Site 





The Glory of Cats 


Cats are wonderful companions. Whether it's a bottle cap, long string, or 


yd^ legs, thev always find something to chase around. 


Tn fact, cats are so great they even have their own musical. It was inspired 
by T S. Eliot's Old Possum's Book of Practical Cats. 


http://en.wikipedia.org]wiki]Cat. 


6.2.7. 同 指向 站 点 内 页 面 的 链接 一 样 ， 当 访问 
者 指向 一 个 指向 其 他 网 站 的 链接 〈 默认 显示 为 带 下 
划 线 的 蓝 色 文 字 ) 时 , 目标 URL 会 显示 在 状态 栏 ， 
title 文本 〈 如果 有 的 话 ) 显示 在 链接 旁 。 如 果 访 
问 者 激活 该 链接 ( 参见 图 6.2.8) …… 


















































6.2.8 seges 与 这 个 目标 URL 相关 联 的 页 面 就 会 
显示 在 访问 者 的 浏览 器 中 





CES 仅 指 定 路 径 ， 省 略 文件 名， 就 可 以 创建 
指向 对 应 目录 下 默认 文件 (通常 为 index.html ) 
的 链接 :wwwsite.comydirectory/。 如 果 连 路 径 也 省 
略 ， 就 指向 网 站 的 默认 ( 首 ) 页 : Wwwsitecom。 


在 URL 中 应 该 全 部 使 用 小 写字 母 ， 

除非 指向 的 页 面 或 目录 名 称 中 含有 大 写字 母 。 
(对 于 你 自己 的 网 站 ， 应 使 用 小 写字 母 对 所 
有 的 文件 夹 和 文件 命名 ,并 与 链接 URL 对 应 。) 


不 要 让 链接 的 标签 太 长 。 如 果 标 签 是 
句子 的 一 部 分 ， 应 在 链接 定义 中 仅 保留 关键 
词 ， 让 句子 的 其 他 部 分 位 于 a 元 素 的 外 面 。 


D 一 定 有 要 在 网 站 的 每 个 页 面包 含 指 向 网 
站 各 主要 板块 (包括 首页 ) 的 导航 。 这 可 以 
让 访问 者 自由 地 浏览 网 站 ,不管 他 们 是 直接 
访问 网 站 , 还 是 通过 其 他 网 站 的 链接 访问 的 。 
你 无 法 知道 访问 者 会 从 哪里 进入 你 的 网 站 ， 
可 能 是 通过 指向 网 站 内 页 的 “深度 ”链接 ， 
因此 你 应 该 让 他 们 可 以 从 那里 开始 访问 网 站 
的 其 余部 分 。 


CES ”不管 怎样 ,应 避免 使 用 “点 击 此 处 ” 
作为 标签 。 这 种 类 型 的 链接 文本 在 万 维 网 上 实 
在 是 太 常 见 了 ， 它 会 破坏 网 站 的 可 用 性 和 可 访 
问 性 ， 从 而 对 网 站 的 拥有 者 产生 不 利 的 影响 。 
当 用 户 快速 扫 过 页 面 上 的 链接 ( 无论 是 通过 屏 
幕 还 是 通过 屏幕 阅读 器 ) 时 ,会 发 现 “ 点 击 此 
处 ”缺乏 上 下 文 (“点 击 此 处 ? 为 什么 ? 7). 
它 对 激活 链接 几乎 不 会 产生 激励 ， 而 且 依 赖 于 
访问 者 阅读 链接 周围 的 文字 ， 并 寄 希 望 于 这 些 
文字 可 以 解释 链接 的 目的 。 不 难 理解 ， 访 问 者 
通常 更 倾向 于 跳 过 这 样 的 链接 。 此 外 ， 正 如 本 
章 开 头 提 到 的 ，“ 点 击 ”一 词 并 不 适用 于 用 户 
触发 链接 的 所 有 方式 。 相 反 ， 应 该 使 用 文本 中 
已 经 存在 的 关键 词 对 链接 进行 标识 。 例 如 ， 应 
使 用 “了 解 我 们 的 销售 情况 ”， 而 不 是 “点 击 
此 处 了 解 我 们 的 销售 情况 ”。 


CES 有 要 创 建 指向 某 页 面 特定 位 置 的 链接 ， 
可 以 使 用 锚 (参见 6.3 节 ) 。 


fEE 国 正如 本 章 引 言 中 提 到 的 ， 可 以 使 用 键 
盘 浏 览 网 页 。 每 次 按 下 Tab， 焦 点 就 会 转 到 
HTML 代码 中 出 现 的 下 一 个 链接 、 表 单 控件 
或 图 像 映 射 。 这 个 顺序 不 一 定 与 屏幕 上 出 现 
的 顺序 一 致 , 因为 页 面 的 CSS 布局 可 能 不 同 。 
通过 使 用 HTML 的 tabindex 属性 ， 可 以 改变 
使 用 Tab 键 的 顺序 ， 但 不 建议 使 用 它 ， 因 为 
它 在 大 多 数 情况 下 是 不 必要 的 、 过 时 的 做 法 。 
(在 某 些 情况 下 它 可 能 有 用 ， 但 通常 这 是 出 
于 使 用 JavaScript 增强 交互 体验 的 需要 ， 这 已 
属于 高 级 主题 。 ) 相反 ， 应 在 对 内 容 进 行 标 
记 时 稍 加 注意 ， 确 保 使 用 Tab 键 的 顺序 是 符 
合 逻 辑 的 。 应 对 自己 的 页 面 使 用 Tab 键 进行 
测试 ， 就 像 用 户 的 操作 一 样 ， 再 对 HTML 作 
相应 的 调整 。 
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target 属性 

可 以 让 链接 在 新 的 窗口 或 标签 页 ( 取决 于 所 用 的 浏览 器 ) 打开 ， 但 这 被 认为 是 一 种 不 好 
的 实践 ， 不 推荐 使 用 。 这 样 说 是 有 理由 的 。 

首先 ， 应 该 让 用 户 决 定 是 否 在 不 同 的 窗口 或 标签 页 打开 链接 ， 而 不 是 让 HTML 开发 人 员 
决定 。 否 则 ,我 们 就 支配 了 用 户 的 浏览 行为 。 

也 有 一 些 可 用 性 和 可 访问 性 方面 的 考虑 。 缺 乏 经 验 的 用 户 在 激活 一 个 链接 却 没有 在 当前 
窗口 看 到 结果 时 可 能 会 有 一 些 疑 惑 。 使 用 浏览 器 并 非 对 所 有 人 都 是 一 件 容易 的 事 ; 我 曾 向 不 
同年 龄 段 的 人 展示 标签 页 ， 他 们 之 前 并 不 知道 可 以 同时 打开 多 个 页 面 。 类 似 地 ， 屏 幕 阅读 器 
等 辅助 设备 的 用 户 将 不 入 不 另 外 花费 努力 去 转向 新 的 窗口 或 标签 页 ， 前 提 还 是 他 们 明确 知道 

是 哪个 窗口 或 标签 页 加 载 了 新 的 内 容 。 

如 果 所 有 这 些 并 未 说 服 你 避免 使 用 在 新 窗口 和 标签 页 打开 的 链接 ， 或 者 你 的 老板 
或 客户 不 赞同 你 不 使 用 它们 的 理由 ， 可 以 看 看 如 何 创建 这 种 链接 : 在 链接 定义 中 输入 
target-"window", } P window 是 应 该 显示 相应 页 面 的 窗口 的 名 称 ( 由 你 自己 选择 ) 。 

例如 ，<a href-"some-page.html" target-"doodad"»Some page«/a» 会 在 名 为 doodad 的 新 
窗口 或 标签 页 中 打开 some-page.html, 

如 果 让 多 个 链接 指向 同一 个 窗口 ( 即使 用 同一 个 名 称 ) ， 链 接 将 都 在 同一 个 窗口 打开 。 
或 者 ， 如 果 你 希望 链接 总 是 在 不 同 的 窗口 或 标签 页 打开 ( 即使 多 次 激活 同一 个 链接 ) ， 就 使 
用 HTML 预定 义 的 名 称 blank， 即 使 用 target="_blank", 

不 过 我 还 是 不 推荐 你 这 样 做 ， 能 免 则 免 。 

target 还 有 一 种 用 法 ， 就 是 在 iframe 中 打开 链接 。 可 以 用 同样 的 方法 编写 target, X 
是 其 值 应 与 iframe 的 id 对 应 。 你 很 少 有 机 会 用 到 这 个 ， 特 别 是 在 通常 不 推荐 使 用 iframe 的 
情况 下 (尽管 它们 有 时 会 有 用 武之 地 ) 。 关 于 iframe 元 素 的 更 多 信息 ， 参 见 https://developer. 
mozilla.org/en/HTML/Element/iframe - 

尽管 这 里 不 会 讲解 图 像 映 射 的 用 法 ， 但 你 应 知道 它们 是 用 来 为 单 张 图 片 的 一 个 或 多 
域 添 加 链接 的 。 可 以 将 每 个 链接 区 域 定义 为 矩形 、 圆 形 或 多 边 形 。 缺 乏 经 验 的 编码 人 员 常 
误 用 它们 创建 基于 图 像 的 导航 ， 而 不 是 使 用 更 为 合理 的 技术 ， 如 用 CSS 或 图 像 蔡 换 技 术 s 
果 CSS 不 够 用 的 话 ) 制作 的 HTML 文本 。 图 像 映射 的 瞻 盛 已 是 多 年 以 前 的 事情 了 ， 那 时 上 
述 这 些 技术 还 不 普遍 ( 甚至 不 可 能 实现 ) 。 现 在 图 像 映射 已 经 用 得 很 少 了 ， 但 偶尔 还 有 一 些 
合理 的 用 例 ， 例 如 ， 对 于 茶 个 国家 的 地 图 ， 硕 望 定义 指向 各 地 区 、 省 或 州 的 链接 。 可 以 在 网 
上 搜索 “HTML image maps" (HTML 图 像 映射 ) 了 解 有 关 图 像 映 射 的 更 多 信息 。 
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6.3 创建 锚 


通常 ， 激 活 一 个 链接 会 将 用 户 带 到 对 应 
网 页 的 顶端 。 如 果 要 想 用 户 跳 至 网 页 的 特定 
区 域 , 可 以 创建 一 个 锚 , 并 在 链接 中 引用 该 锚 ， 
参见 图 6.3.1 和 图 6.3.2. 











«body» 


«hi»Frankie and Johnny«/hi» 


«header» 
«h2»Table of Contents«/h2» 
«nav» 
«ul» 
<li><a href-"fintro"»Introduction«/a»«/li» 
<li><a href-"fmain-characters"»Description of the Main Characters«/a»«/li» 
<li><a href-"frising-action"»Rising Action«/a»«/li» 
</ul> 
</nav> 
</header> 
<article> 


«h2 id="intro">Introduction</h2> 
<p>This is the intro. If I could think of enough things to write about, it could span a few 
'pages, giving all the introductory information that an introduction should introduce.«/p» 


<h2 id-"main-characters"»Description of the Main Characters«/h2» 
<p>Frankie and Johnny are the main characters. She's jealous, and seems to have a reason to be. 
— He's a sleaze, and will pay the price.«/p» 


<h2 idz"rising-action'»Rising Action«/h2» 
<p>This is where everything starts happening. Johnny goes out, without Frankie, without even 
»tellin' her where he's going. She's not crazy about it, but she lets him go. A while later, 
— she gets thirsty and decides to go down to the corner bar for some beer. Chatting with the 
— bartender, she learns that Johnny has been there with no other than Nellie Bly. Furious, she 
> catches the crosstown bus to find him.«/p» 
«/article» 


«/body» 
«/html» 











6.3.1 每 个 以 # 开 头 的 链接 href 值 都 指向 拥有 相应 id ( 不 含 # ) 的 元 素 。 例 如 ，<a href="#rising- 
action'">Rising Action«/a» 指向 <h2 id="rising-action">Rising Action</h2>。 可 以 为 任何 元 素 指定 
id, 只 要 任何 给 定 的 id 在 一 个 页 面 中 只 存在 一 次 (参见 3.15  )。 这 个 例子 还 让 你 提前 看 到 了 无 序列 表 ( ul ) 
的 应 用 。 无 序列 表 是 目前 万 维 网 上 使 用 频率 最 高 的 列表 类 型 (第 15 章 将 深入 讨论 列表 ) 
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«header» 
«h2»Table of Contents«/h2» 
«nav» 
«ul» 
<li><a href="#intro"> 
— Introduction«/a»«/li» 


«/ul» 
«/nav» 
«/header» 


«article» 

«section id="intro"> 
«h2»Introduction«/h2» 
<p>This is the intro...«/p» 

«/section» 


«section id-"main-characters"» 
«h2»Description of the Main 
— Characters«/h2» 

«/section» 

«section id-"rising-action"» 
«h2»Rising Action«/h2» 

«/section» 

«article» 


«/body» 
</html> 











E 6.3.2 第 一 个 例子 (图 6.3.1) 设计 得 很 简单 ， 
只 是 为 了 演示 锚 的 基本 用 法 。 不 过 ， 可 以 将 每 个 答 
案 放 人 一 个 section 元 素 以 进一步 增强 语义 ， 同 时 
将 id 放 在 这 些 元 素 内 ， 而 不 是 放 在 标题 里 。 这 这 
些 内 容 的 方法 (未 在 让 它们 成 为 article 父 元 素 的 
区 块 。 另 一 种 标记 这 里 演示 ) 是 将 每 个 答案 视 为 单 
独 的 article， 这 可 以 通过 移 除 article 父 元 素 ， 
并 将 每 个 section 改 为 article 实现 。 这 取决 于 你 

希望 以 哪 种 方式 描述 你 的 内 容 含 义 ( 你 认为 这 些 答 
案 是 一 篇 文章 还 是 各 自 独 立 的 文章 ) 























创建 锚 的 步骤 

(1) 将 光标 放 在 希望 用 户 跳 转 至 的 元 素 的 
开始 标记 里 。 

(2) 输入 id-"anchor-name", Hip anchor- 
name 是 在 内 部 用 来 标识 网 页 中 这 部 分 内 容 的 
文字 。 一 定 要 在 元 素 名 称 和 id 之 间 保 留 一 
空格 ， 例 如 <h2 id="rising">。 





CES a t 增强 
HTML 文档 的 语义 丰富 度 。 换 句 话 说， 避免 
使 用 anchori, item5 2: id, 


(mg id 中 不 能 使 用 空格 ， 应 该 用 短 横 线 分 
隔 不 同 的 单词 。 


EED 在 某 些 情况 下 ， 可 能 需要 在 每 个 内 容 


区 块 的 下 方 包 含 一 个 指 回 目录 的 链接 (你 可 
能 已 经 习惯 于 看 到 它们 了 ， 它 们 通常 显示 为 
“返回 顶部 ”) 。 不 过 ， 如 果 你 的 页 面 有 好 


几 个 长 的 区 块 , 可 以 考虑 将 它 分 成 多 个 页 面 。 


6.4 ”链接 到 特定 的 锚 


通过 id 创建 了 锚 以 后 ， 就 可 以 定义 一 
个 链接 ， 当 用 户 触发 它 时 ， 页 面 会 直接 跳 
至 文档 中 包含 该 销 的 区 域 (参见 图 6.4.1 和 
图 6.4.2 ) ， 而 不 是 文档 的 顶端 。 
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Frankie and Johnny 


Table of Contents 


* Introduction 
e Description of the Main Characters 


e Rising Achen 
* Climax 


* Denouement 














Introduction 


This is the intro. IFI could think of enough things to write about, it 
could span a few pages, giving all the introductory information that 
an introduction should introduce 


Description of the Main Characters 


http://bruceonthelo....htmlstrising-action 


图 6.4.1 在 桌面 浏览 器 中 ， 当 访问 者 将 鼠标 指向 
引用 锚 的 链接 时 ，URL 和 锚 名 称 会 显示 在 状态 栏 
中 (在 窗口 的 左下 角 ) 


igi 
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Rising Action 








This is where everything starts happening. Johnny goes out, without 
Frankie, without even tellin' her where he's going, She's not crazy 
about it, but she lets him go. A while later, she gets thirsty and 
decides to go down to the corner bar for some beer. Chatting with 
the bartender, she learns that Johnny has been there with no other 
than Nellie Bly. Furious, she catches the cross town bus to find 
him. 


Climax 


| 


When Frankie gets to Nellie's house, she looks up and sees them 


6.4.2 ” 当 访问 者 激活 该 链接 时 ， 锚 引用 的 页 面 
特定 部 分 就 会 显示 在 浏览 器 窗口 的 顶部 


























创建 链接 到 特定 锚 的 链接 

(1) 输入 <a href-"Zanchor-name"», Hip 
anchor-name 是 目标 的 id 属性 值 (参见 6.3 节 

“创建 销 的 步骤 ”中 的 第 Q) 步 ) 。 

(2) 输入 标签 文本 , 即 突出 显示 的 文本 ( 通 
常 默认 显示 为 带 下 划 线 的 蓝 色 文 字 ) ， 也 即 
用 户 激活 它 时 将 用 户 带 到 第 (1) 步 中 引用 的 区 
域 的 文本 。 

(3) 输入 </a> 结束 对 链接 的 定义 。 


如 果 锚 位 于 另 一 个 文档 ， 就 使 用 
«a href ="page.html#anchor-name"> 5| 用 
该 区 域 。( 在 URL 和 # 之 间 没 有 空格 。) 如 
果 锚 位 于 另 一 台 服 务 器 上 的 页 面 ， 则 需 输入 
«a href="http://www.site.com/path/page. 
html£&anchor-name"» (没有 空格 ) 。 











我 们 显然 无 法 在 别人 的 页 面 中 添加 
锚 ， 但 可 以 利用 他 们 已 经 做 好 的 锚 。 查 看 他 
们 文档 的 源 代码 ， 就 可 以 找到 某 区 域 对 应 的 
4 (关于 查看 源 代码 的 方法 ， 参 见 2.8 节 ) 。 


EED icti TYOR FUE, ARA ETE 
不 会 显示 在 窗口 的 顶部 ， 而 是 显示 在 中 间 。 


6.5 创建 其 他 类 型 的 链接 


并 非 只 能 创建 指向 其 他 网 页 的 链接 ， 其 
实 可 以 创建 指向 任何 URL 的 链接 一 一 RSS 源 、 
希望 访问 者 可 以 下 载 的 文件 、 电 子 邮 件 ， 等 
等 (参见 图 6.5.1) 。 


创建 其 他 类 型 链接 的 步骤 

(1) 输入 <a href=", 

(2) 输入 URL。 

(3) 对 于 指 问 万 维 网 上 任何 文件 ( 包括 图 
像 、ZIP XIF, FEF, PDF, Excel 电子 表格 等 ) 
的 链接 ， 输 A http://www. site.com/path/ 
file.ext ,其 中 www.site.com 是 服务 器 的 名 称 ， 
path/file.ext 是 目标 文件 ( 含 扩 展 名 ) 的 
路 径 。 

(4) 输 入 ">。 

(5) 输入 链接 的 标签 。 标 签 是 默认 以 下 划 
线 和 蓝 色 突出 显示 的 文本 ， 当 用 户 激活 它 时 ， 
会 将 访问 者 带 到 第 (2) 步 中 引用 的 URL。 也 
可 以 添加 一 个 img 元 素 蔡 代 文 本 (或 同文 本 
一 起 ) 作为 标签 (参见 图 6.5.1 以 及 本 节 末 尾 
的 “将 缩 略图 链接 到 网 像 ”) 。 


CES 如 果 链 接 指 向 的 文件 是 浏览 器 不 知道 
如 何 处 理 的 类 型 (例如 Excel 文件) ， 浏 览 器 
将 试 着 打开 一 个 辅助 程序 来 查看 这 个 文件 ， 
或 试 着 将 它 下 载 到 访问 者 的 磁盘 上 。 

















CES Ai ATAK AGUA XB 
行 压 缩 是 个 好 办 法 。 例 如 ， 一 套 保 存 为 PSD 
文件 的 Photoshop 模板 。 在 网 上 搜索 “ZIP and 
RAR”， 查 找 创建 和 打开 使 用 这 些 流行 的 压 
缩 格式 的 文件 存档 的 工具 。 
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«body» 
«hi»Other Types of Links«/hi» 


<p>There are lots of different kinds of links that you can create on a Web page. More precisely, 
— there are a lot of different files you can link to on your Web page.«/p» 


«p»You can create links directly to «a href-"img/blueflax.jpg'"»a photo«/a» or even make links out 
— of photos.«/p» 


«p»For example, here are Cookie and Woody again, except this time they are linked to other pages. 

><a href-"cookie.html" title-"All about Cookie"»«img src-"img/cookiefora.jpg" width-"143" 
> heightz"131" alt-"Cookie" /»«/a» «a href-"woody.html" title-"All about Woody"»«img 
src-"img/ 

> woodygran.jpg" width-"202" height-"131" alt-"Woody" /»«/a»«/p» 


«p»You can link directly to «a hrefz"http://www.sarahsnotecards.com/catalunyalive/segadors. 
mov" 

^ rel-"external"»a video</a> file, too, though it's usually better to link to a page with the 

— video embedded in it, such as with the «abbr title-"Hypertext Markup Language revision 5"»HTML5 

— «/abbr» «code»video«/code» element.«/p» 


«p»Although you can make a link to «a href-"mailto:someoneGsomedomain.com"»someone's email 
— addresss«/a» with the «code»mailto:«/code» protocol, I don't recommend it, since spambots pick 

— those up and then bombard them with spam. It's too bad, because they are so convenient. If you 

— activate the link, it opens your email program. It's probably better to offer your email address 
— in a descriptive way, like &quot;someone at somedomain,8quot; although that isn't always foolproof 
> either.«/p» 


«body» 
</html> 








6.5.1 可 以 创建 指向 各 种 类 型 URL 的 链接 。 这 个 页 面包 含 五 个 链接 ， 但 两 个 包 半 图 像 的 链接 可 能 




















不 


对 所 有 浏览 器 可 见 〈 参 见 岁 6.5.2 ) 。 (这 个 例子 还 频繁 使 用 abbr 元 素 标记 缩写 词 ， 以 及 指示 内 容 为 代码 
的 code 元 素 。 这 两 个 元 素 均 在 第 4 章 中 讲 到 过 。 ) 
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Other Types of Links 


There are lots of different kinds of links that you can create on a Web page. More precisely, there 
are a lot of different fles you can link to on your Web page. 


You can create links to directly to a photo or even make links out of photos 


For example, here are Cookie and Woody again, except this time they are linked to other pages 


You can link directly to a video file, too, though it's usually better to link to a page with the video 
embedded in it, such as with the HTML video element. 

















Although you can make a link to someone's email address with the mailto: protocol, I don't 
recommend it since spambots pick those up and then bombard them with spam. It's too bad 
because they are so convenient. If you activate the link, it opens your email program. It's probably 
better to offer your email address in a descriptive way, like "someone at somedomain," although 
that isn't always foolproof either. 








V ast PE Ps] PES DLE, AUERS ) 。 

















是 使 用 “点 击 此 处 ” (Click me) 作为 标签 


意 ， 我 尽量 创建 与 文本 主体 混在 一 起 的 标签 ， 而 


图 6.5.2 ”无 论 链接 通 向 哪里 ， 它 们 在 浏览 器 中 的 
默认 样式 都 是 一 样 的 ， 除 非 其 中 包含 图 像 (有 的 浏 


注 
不 


120 第 6 章 4k B 





CES 尽管 可 以 链接 到 PDF 和 其 他 莫 
HTML 文档 (Word、Excel 等 ) ， 但 应 尽量 
避免 这 样 做 。 相 反 ， 应 链接 到 包含 有 关 信 息 
的 HTML 页 面 。 PDF 可 能 要 花 更 长 的 时 间 加 
载 ， 而 且 有 的 浏览 器 和 系统 (特别 是 旧 的 浏 
览 器 和 系统 ) 在 尝试 显示 它们 的 时 候 会 变 得 
很 慢 。 当 PDF 是 唯一 的 选择 时 ， 要 让 用 户 知 
道 链接 指向 的 是 PDF 而 不 是 另 一 个 HTML 页 
面 ， 以 免 让 他 们 感到 意外 ( 如 果 让 用 户 进 入 
耗 时 的 下 载 ， 他 们 是 不 会 领情 的 ) 。 这 条 建 
议 对 其 他 非 HTML 文档 也 适用 。 显 示 给 用 户 
的 信息 可 以 是 简单 地 用 括号 包围 的 文件 类 型 
和 大 小 ， 也 可 以 显示 一 个 图 标 。 例如 (不 包 
含 图 标 ) : «a href="q2-sales-report.pdf">02 
Sales Report (PDF，725kb)</a>。 还 可 以 在 
链接 中 包含 title 属性 (如 title="0pens a 
PDF") , ， 特 别 是 在 当 你 希望 把 括号 说 明 放 在 
链接 外 的 时 候 。 


如 果 要 “创建 指向 iTunes Store, App 
Store, iBookstore 和 Mac App Store 上 内 容 的 链 
接 ” (链接 如 下 ) ， 可 以 使 用 苹果 公司 的 Link 
Maker ( http://itunes.apple.com/linkmaker ) 生成 
URL 放 在 HTML 里 。 如 果 你 是 联盟 成 员 (www. 
apple.conyitunes/affiliates/ ) ， 人 们 通过 你 的 链 
接 购买 物品 时 ， 革 有 果 公司 会 为 你 支付 佣金 。 


将 缩 略 图 链接 到 图 像 

你 肯定 访问 过 显示 几 个 缩 略 图 ( 图 像 的 
微缩 版 本 ) 的 相册 页 面 ， 其 中 缩 略 图 链接 到 
大 一 些 的 图 像 。 这 样 就 可 以 一 次 看 到 很 多 图 
片 ,让 访问 者 选择 要 查看 全 尺寸 版 本 的 图 像 。 

实现 其 基本 版 本 类 似 于 将 Cookie 和 
Woody 图 像 链接 到 其 他 页 面 的 示例 代码 (A 
见 图 6.5.1 ) 。 这 些 页 面 中 的 每 一 个 都 包含 
一 个 全 尺寸 照片 。 (也 可 以 在 单独 一 个 动态 
页 面 中 实现 ， 但 这 是 超出 HTML 能 力 的 高 
级 用 法 。 ) 

注意 不 要 让 任何 给 定 页 面 上 的 缩 略 图 数 
量 太 多 。 它 们 可 能 很 小 ， 但 每 个 缩 略 图 都 会 
生成 对 Web 服务 器 的 独立 请 求 ， 合 在 一 起 
就 会 让 页 面 变 慢 。 没 有 规则 规定 一 个 页 面 放 
多 少 缩 略图 是 合适 的 。 这 部 分 取决 于 页 面 加 
载 的 其 他 资源 的 数量 和 大 小 ， 也 取决 于 网 站 
的 目标 受众 。 例 如 ， 移 动 设备 加 载 资源 通常 
要 慢 一 些 。 

因此 ， 如 果 你 有 很 多 缩 略图 ， 就 要 考 
虑 将 它们 分 入 多 个 页 面 。 通 常 ， 每 页 20 ~ 
30 个 缩 略 图 是 比较 合理 的 ， 同 时 也 要 再 次 
对 上 述 因素 进行 考虑 。 可 以 对 页 面 进行 测 
试 ， 再 确定 最 合适 的 数量 。 

最 后 ， 推 荐 使 用 无 序列 表 (ul, HÆ 
第 15 章 讲 到 ) 对 缩 略 图 列表 进行 标记 。 
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本 章 内 容 

口 构造 样式 规则 

口 为 样式 规则 添加 注释 
QS. 当 样 式 发 生 冲 突 时 
口 属性 的 值 








HTML 定义 内 容 的 含义 ， 为 网 页 构建 基 
本 的 结构 ， 而 CSS (Cascading Style Sheet, 
层 倒 样式 表 ) 则 定义 它们 的 外 观 。 
样式 表 不 过 是 一 种 文本 文件 ， 其 中 包 
含 一 个 或 多 个 ( 通过 属性 和 值 ) 决定 网 页 某 
特定 元 素 如 何 显示 的 规则 。CSS 里 有 控制 
基本 格式 〈 如 字号 和 颜色 ) 的 属性 ， 有 控制 
布局 ( 如 定位 和 浮动 ) 的 属性 ， 还 有 决定 
访问 者 打印 时 在 哪里 换 页 的 打印 控制 元 素 。 
CSS 还 有 很 多 控制 项 目 显 示 或 消失 的 动态 
































CSS 很 棒 的 一 点 在 于 开发 人 员 可 以 在 网 
页 之 外 创建 它 ， 再 将 它 同 时 应 用 于 网 站 上 所 
有 的 页 面 。 它 灵活 、 强 大 而 且 高 效 ， 可 以 为 
你 节省 大 量 的 时 间 和 带宽 。 

为 了 充分 利用 CSS 的 优势 ， 必 须 依照 
HTML 相关 章节 的 推荐 做 法 对 网 页 进行 良好 
并 一 致 地 标记 。 


构造 样式 规则 


样式 表 中 的 每 条 规则 都 有 两 个 主要 部 
分 : 选择 器 (selector ) 和 声明 块 (declaration 
block) 。 选 择 右 决定 哪些 元 素 受 到 影响 ; 声 
明 块 由 一 个 或 多 个 属性 / 值 对 ( 每 个 属性 / 值 
对 构成 一 条 声明 ) 组 成 ， 它 们 指定 应 该 做 什 
么 (参见 图 7.1.1 和 图 7.1.2 ) 。 








7.1 














属性 ， 可 以 用 于 创建 下 拉 列 表 和 其 他 交互 性 
组 件 。 

CSS2 是 新 旧 浏 览 句 文 持 最 为 广泛 的 
版 本 ， 因 此 本 书 将 大 量 讨 论 这 一 版 本 的 内 
容 。CSS3 目前 还 没有 成 为 规范 ， 它 以 CSS2 
为 基础 ， 提 供 了 大 量 设 计 人 员 和 开发 人 员 
长 期 期 待 的 功能 。 值 得 庆幸 的 是 现代 浏览 
器 已 经 实现 了 一 些 CSS3 的 组 件 ， 因 此 从 
现在 起 你 就 可 以 用 它们 了 。 本 书 将 讲解 其 
中 一 些 最 为 有 用 且 浏 览 器 支持 情况 良好 的 
功能 。 














AH PDA 
hi { 
color: red; H # A 
E £5 
] Bk d 




















7.1.1. 样式 规则 由 选择 器 ( 表示 哪些 元 素 将 进 
行 格式 化 ) 和 声明 块 ( 描述 要 执行 的 格式 化 ) 组 成 。 
声明 块 内 的 每 条 声明 都 是 一 个 由 冒号 阳 开 、 以 分 号 
结尾 的 属性 / 值 对 。 声 明 块 以 前 花 括 号 开始 ， 以 后 
花 括号 结束 
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hi { 
background: yellow; 





color: red; 


} T 


两 条 声明 ， 每 条 都 有 一 个 属性 和 一 个 值 

















图 7.1.2 声明 的 顺序 并 不 重要 ， 除 非 对 相同 的 属 
性 定义 了 两 次 。 在 这 个 例子 中 ，color: red 也 可 
以 放 在 background: yellow 前 面 , 效果 是 一 样 的 。 
注意 额外 的 空格 和 缩 进 (可 选 ， 但 推荐 包含 ) 提高 
了 可 读 性 


























构造 样式 规则 的 步骤 

(1) 输入 selector, iX Hif selector 表示 
希望 进行 格式 化 的 元 素 。 第 9 章 将 讲解 如 何 
创建 各 种 类 型 的 选择 器 。 

(2) 输入 ( (前 花 括 号 ) 开始 声明 块 。 

(3) 输入 property:value;, "P property 
是 CSS 属性 的 名 称 ， 描 述 要 应 用 哪 种 格式 ; 
value 是 该 属性 允许 的 选项 之 一 。 本 书 从 第 8 
章 开 始 讲 解 CSS 属性 和 值 。 

(4) 根据 需要 ,重复 第 (3) 步 。 通常 一 行 
输入 一 个 property: value (一 条 声明 ) 。 


(5) 输入 }， 结 束 声 明 块 和 样式 规则 。 


在 样式 规则 中 可 以 添加 额外 的 空格 、 
制 表 符 或 回 车 ， 从 而 提高 样式 表 的 可 读 性 ( 参 
见 图 7.1.2 ) 。 示 例 中 的 格式 或 许 是 编码 人 员 
中 最 为 常见 的 一 种 格式 。 














每 组 属性 / 值 对 都 应 该 使 用 一 个 分 号 
与 下 一 组 属性 / 值 对 分 开 ， 但 列表 中 最 后 一 对 
后 面 的 分 号 可 以 省 略 。 不 过 ， 推 荐 包含 这 个 
分 号 ， 这 被 证 明 是 一 种 最 佳 实践 。 


CHES 缺少 (或 重复 ) 分 号 会 使 浏览 器 忽略 
样式 规则 。 


7.2. 为 样式 规则 添加 注释 


在 CSS 中 添加 注释 是 个 好 主意 ， 这 样 就 
可 以 标注 样式 表 的 主要 区 域 ， 或 者 只 是 对 某 
条 规则 或 声明 的 说 明 。 注 释 不 仅 对 你 有 用 ， 
对 阅读 代码 的 其 他 人 也 有 好 处 。 当 你 过 几 个 
月 再 看 你 写 的 代码 时 ， 会 庆幸 自己 留 下 了 这 
些 注 释 。 


为 样式 规则 添加 注释 

(D) 在 样式 表 中 ， 输 入 /* 开始 注释 。 
(2) 输入 注释 。 

(3) 输入 */ 结束 注释 。 


注释 可 以 包含 回 车 ， 因 此 可 以 跨越 多 
ff (参见 图 7.2.1)。 















































/* 这 是 一 段 CSS 注 释 。 它 可 以 只 有 一 行 , 也 可 以 
， 跨越 多 行 。 这 个 注释 比 大 多 数 注释 都 长 。 CSS 注 
> 释 不 会 同 网 站 HTML 内 容 一 起 显示 在 浏览 器 中 。 
» 下 面 一 条 注释 更 合乎 注释 的 常规 用 法 。 */ 


/* 为 旧 的 浏览 器 设置 特定 HTIML5 元 素 的 默认 呈现 样式 。*/ 
article, aside, details, figcaption, figure, 
— footer, header, hgroup, menu, nav, section { 


display: block; 
} 








图 7.2.1 注释 可 长 可 短 ， 但 它们 通常 较 短 。 可 以 
根据 你 的 想法 ， 用 它们 描述 样式 规则 或 一 组 相关 
的 规则 的 目的 。 注 释 做 得 好 可 以 让 样式 表 更 易于 
维护 








提 示 不 能 将 注释 放 在 另 一 个 注释 里 。 H4 
话说 ， 注 释 中 不 能 包含 */。 


ED 可 以 将 注释 放 在 单独 的 行 上 ( 参见 图 
721) , ， 也 可 以 放 在 声明 块 里 (参见 图 722 ) ， 
也 可 以 放 在 规则 后 面 ( 参见 图 72.2) 。 
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/* Add rounded corners in supporting browsers */ 
.box { 


border-radius: 12px; /* 现代 浏览 器 */ 
) /* 再 写 一 条 注释 */ 





-webkit-border-radius: 12px; /* Safari 3-4 */ 
-moz-border-radius: 12px; /* Firefox 3.6 及 以 下 */ 


























7.2.2 也 可 以 在 声明 块 里 或 规则 后 面 插 人 注释 














CES 注释 是 很 有 用 的 组 织 工具 。 样 式 表 很 
快 就 会 变 得 很 长 ， 因 此 ， 对 样式 表 进 行 组 织 对 
于 保持 CSS 易于 维护 是 至 关 重 要 的 。 通 常 ， 将 
相关 的 规则 放 在 一 起 ， 形 成 分 组 ， 并 在 每 组 前 
面 放 置 一 段 描述 性 的 注释 ， 参 见 图 7.2.3。 














/* GLOBAL NAVIGATION (全 站 导航 ) 
pe a */ 
een 全 站 导航 的 样式 规则 …… 
/* MAIN CONTENT (主体 内 容 ) 
a */ 
en 主体 内 容 的 样式 规则 …… 
/* SIGN-UP FORM (注册 表单 ) 
——————Á— */ 
…… 注 册 表 单 的 样式 规则 …… 
/* PAGE FOOTER (页 脚 ) 
ES */ 
EN 页 脚 的 样式 规则 ……: 

7.2.3 注释 可 以 让 样式 表 管 理 变 得 很 轻松 。 对 





样式 表 中 的 主要 区 域 添加 注释 ， 就 可 以 保持 样式 表 
井然 有 序 。 下 面 的 格式 ( 使 用 大 写字 母 和 一 条 下 划 
线 ) 可 以 很 清楚 地 标识 分 组 的 开始 位 置 。 这 种 做 法 
可 以 很 清晰 地 将 它们 与 其 他 注释 ( 如 图 7.2.1 和 图 
7.2.2 中 的 注释 ) 区 分 开 来 














CES 无 论 你 采用 怎样 的 注释 格式 ， 推 荐 你 
定 下 一 种 并 坚持 使 用 ， 特 别 是 在 团队 协作 的 
时 候 。 


可 以 将 注释 放 在 样式 规则 的 周围 或 
里 面 ， 从 而 对 浏览 器 隐藏 样式 规则 ( 参见 
图 7.2.4) 。 这 是 对 样式 表 进 行 测试 的 一 种 好 方 
法 ， 不 必 永 久 性 地 删除 注释 部 分 ， 直 到 你 认为 可 
以 删除 它们 了 。 这 也 是 很 有 用 的 调试 工具 ， 可 以 
将 你 认为 可 能 引起 问题 的 地 方 “ 注 释 掉 ”， 再 在 
浏览 器 中 刷新 页 面 ， 查 看 问题 是 不 是 解决 了 。 





img ( 
border: 4px solid red; 
/* margin-right: 12px; */ 


} 


图 7.2.4 可 以 将 你 不 希望 对 页 面 产 生 影响 的 声明 “ 注 
释 掉 ”。 这 里 ， 所 有 的 图 像 都 会 拥有 一 条 4 像素 宽 的 
红色 实 线 边 框 ， 但 不 会 有 右 侧 外 边 距 ， 因 为 margin- 
right: 12px; 位 于 一 条 注释 里 面 。 注 释 也 可 以 包围 
整个 规则 ， 只 要 这 个 注释 里 面 没有 任何 注释 


























D 出 于 演示 的 目的 ， 这 些 例子 都 使 用 了 很 
多 注释 ,但 不 要 因此 认为 要 对 所 有 内 容 添 加 注释 。 
如 果 样 式 表 里 的 注释 过 多 ， 反 而 会 难以 阅读 。 要 
根据 需要 混合 使 用 组 织 性 注释 和 描述 性 注释 。 要 
针对 你 和 团队 里 的 其 他 成 员 ， 找 到 一 个 平衡 点 。 


7.3. EE. 当 规则 发 生 冲 突 时 


很 多 地 方 都 可 以 应 用 样式 。 正 如 你 在 第 
1 前 中 学 到 的 ， 每 个 浏览 右 都 有 其 默认 样式 。 
不 过 ， 你 可 以 用 自己 的 样式 覆盖 它们 或 对 它 
们 进行 补充 。 应 用 样式 有 三 种 方式 : 从 一 个 











124 $73 CSS 构造 块 





或 多 个 外 部 文件 导入 (推荐 ) ， 如 图 73.1 中 
的 代码 所 示 ， 插 入 到 HTML 文档 的 顶部 ， 或 
直接 应 用 于 代码 中 特定 的 元 素 上 (P, 
该 尽 可 能 地 避免 这 样 做 ) 。 下 一 章 将 对 这 三 
种 方式 做 具体 讲解 。 














Pt 


color: #36c; 

font-family: "Trebuchet MS", 
"Helvetica", sans-serif; 
font-weight: bold; 











} 
img { 
float: left; 
margin-right: 10px; 
} 
73.4 这 是 图 732 P HTML 文档 的 样式 表 。 现 在 








不 需要 关心 太 多 的 细节 ， 只 需要 意识 到 这 里 有 一 条 
关于 p 元素 ( 而 不 是 h1、em 或 small 元 素 ) 的 规则 

同时 ,一 些 浏览 器 还 允许 访问 者 创建 他 
们 自己 的 样式 表 ， 并 将 其 应 用 于 他 们 所 访问 
的 页 面 ( 包括 你 的 页 面 ) 。 此 外 ， 有 一 些 样 
式 是 由 子 元 素 继承 自 父 元 素 的 。 

你 可 能 会 问 ， 对 某 一 给 定 元 素 应 用 多 条 样 
式 规则 时 ,会 发 生 什 么 情况 ? CSS HEAKJE 
则 来 考虑 继承 ( inheritance ) , 特殊 性 ( specificity ) 
和 位 置 ( location ) 等 重要 特征 ， 从 而 判断 相互 
冲突 的 规则 中 哪个 规则 应 该 起 作用 。 

我 们 从 继承 开始 讨论 。 很 多 CSS 属性 不 
仅 影 响 选 择 器 所 定义 的 元 素 ， 而 且 会 被 这 些 
元 素 的 后 代 继 承 (参见 图 7.3.1、 图 7.3.2 和 
图 7.3.3 ) 。 例 如 ， 假设 要 让 所 有 的 hi 元 素 
显示 为 蓝 色 ， 并 带 有 红色 边框 。 不 过 ，color 
属性 是 继承 的 ， 而 border 属性 不 是 。 那 么 ， 
hi 元 素 里 包含 的 任何 元 素 都 会 是 蓝 色 的 , 但 
不 会 有 红色 的 边框 。 你 将 在 描述 每 个 属性 的 
章节 (以 及 附录 B) 了 解 到 哪些 属性 是 继承 
的 。 另 外 ， 对 大 多 数 属性 来 说 ， 还 可 以 使 用 
















































































inherit 值 强制 进行 继承 (参见 7.4 节 ) 。 





«body» 
«hi»The Ephemeral Blue Flax«/hi» 


<img src-"img/blueflax.jpg" width-"300" 
— height-"175" alt-"Blue Flax (Linum 
—> lewisii)" /> 


<p>I am continually <em>amazed</em> at the 
— beautiful, delicate Blue Flax that somehow 
— took hold in my garden. They are awash in 
— color every morning, yet not a single 

— flower remains by the afternoon. They are 
— the very definition of ephemeral.«/p» 


«p»«small»&copy; by Blue Flax Society. 
^ «/small»«/p» 


«/body» 
</html> 











7.3.2 em 和 small 元 素 包含 在 p 元 素 里 ， 因 此 
它们 是 p 的 子 元 素 。 不 过 ，h1 并 不 是 p 的 子 元 素 ， 
因此 它 不 像 其 他 文本 一 样 是 蓝 色 的 ， 参 见 图 7.3.3 











File Edt view istory Bookmarks Tools Help 


E : 





| L Blue Fla (Linum lewisi) 





The Ephemeral Blue Flax 


I am continually 
amazed at the 
beautiful, delicate 
Blue Flax that 
somehow took 
Æ hold in my garden 
3 MS They are awash in 
E. s s? " BÓ color every 
morning, yet not a single flower remains by the afternoon 
They are the very definition of ephemeral 





€ Blue Flax Society 





7.8.8 ”图 7.3.1 中 并 没有 显 式 地 指定 em 和 small 
元 素 的 样式 ， 它 们 将 从 其 父 元 素 p 那里 继承 字体 、 
粗 体 和 颜色 。 斜体 来 自 浏 览 器 为 em 设 的 默认 样式 。 
出 于 同样 的 原因 ， 由 small ( 表示 法 律 “ 细 则 ” ) 
标记 的 法 律 通告 的 字号 要 比 普 通 文本 的 小 。hd 本 
身 没 有 设置 样式 ， 它 也 不 是 p 的 子 元 素 ， 因 此 它 完 
全 根据 浏览 器 的 默认 样式 进行 显示 ( 男 见 彩 插 ) 
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继承 决定 了 一 个 元 素 没 有 应 用 任何 样 
式 时 应 该 怎样 显示 ， 而 特殊 性 则 决定 了 应 用 
多 个 规则 时 应 该 怎样 显示 (参见 图 7.3.4. 
7.3.5 和 图 7.3.6 ) 。 根 据 特 殊 性 原则 ， 选 择 
器 越 特 殊 ， 规 则 就 越 强 。 讲 得 通 ， 对 吧 ? 
此 ， 如 果 一 条 规则 声明 所 有 的 hi 元 素 都 应 该 
是 蓝 色 的 ， 而 另 一 条 规则 声明 所 有 class 为 
spanish 的 h1 元 素 都 应 该 是 红色 的 ， 那 么 对 
于 所 有 class 为 spanish 的 h1 元 素 ， 第 二 条 
规则 将 覆盖 第 一 条 规则 ， 因 为 h1.spanish 是 
比 ha 更 为 特殊 的 选择 器 。 























color: red; 


p-group ( 
color: blue; 
j 


pillast ( 
color: green; 
} 


p#last ( 
color: magenta; 
} 








<body> 


«p»Here's a generic «code»p«/code» element. 
—> It will be red.«/p» 


«p class-"group"»Here's a «code»p«/code» 
— element with a «code»class«/code» of 

— «code»group«/code». There are two rules 
— that apply, but since the «code»p.group 
— </code> rule is more specific, this 

— paragraph will be blue.«/p» 


«p id-"last" class-"group"»Here's a «code» 
— p«/code» element with an «code»id«/code» 

— of «code»intro«/code». There are four rules 
— that could apply to this paragraph. The 

— first two are overruled by the more 

— specific last two. The position breaks 

— the tie between the last two: the one 

— that appears later wins, and thus this 

— paragraph will be magenta.«/p» 


«/body» 














7.8.4 在 这 个 例子 中 ， 有 四 个 具有 不 同 特殊 性 
的 规则 。 第 一 个 影响 所 有 p 元 素 ， 第 二 个 只 影响 
class 为 group 的 p 元素， 而 第 三 个 和 第 四 个 则 只 
影响 id Jj last 的 唯一 的 p 元 素 

注意 ，id 属性 被 认为 是 最 特殊 的 ( 
为 它们 在 一 个 文件 中 必须 是 唯一 的 ) m 
class 属性 的 选择 需 则 比 不 带 class 的 更 特殊 。 
同时 ， 具 有 多 个 class 的 选择 器 比 只 有 一 个 
class 的 更 特殊 。 在 特殊 性 次 序 中 ， 最 低级 的 
是 只 有 元 素 名 的 选择 器 ， 这 时 继承 的 规则 被 
认为 是 最 一 般 的 , 可 以 被 任何 其 他 规则 覆盖 。 

关于 特殊 性 计算 的 精确 规则 ， 参 见 CSS 
规范 6.4.3 节 ( www.w3.org/TR/CSS2 l/cascade. 
html#specificity ) o 

































































</html> 








7.3.5 这 里 有 三 个 段落 : 一 个 是 一 般 的 ， 一 个 
是 带 有 一 个 class 的 ， 一 个 是 同时 带 有 一 个 class 
和 一 个 id 的 。 











Specificity - Mozilla Firefox 
File Edit view History Bookmarks Tools Help 


H- ——— 


Here's a generic p element. It will be red. 





E Specificity 





Here's a p element with a class of group. There are two 
rules that apply, but since the p. group rule is more specific, 
this paragraph will be blue. 


Here's a p element with an id of intro. There are fout 
rules that could apply to this paragraph. The first two are 
overruled by the more specific last two. The position breaks 
the tie between the last two: the one that appears later wins, 
and thus this paragraph will be magenta 

















由 于 第 三 个 和 第 四 个 规则 具有 相同 的 特 


图 7.3.6 
殊 性 ， 位 置 就 成 为 一 个 考虑 因素 。 由 于 第 四 条 规则 
最 后 出 现 ， 因 此 它 的 优先 级 更 高 

















mis 
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有 时 候 ， 特 殊 性 还 不 足以 判断 在 相互 
冲突 的 规则 中 哪 一 个 应 该 优先 。 在 这 种 情况 
F, 规则 的 位 置 就 可 以 起 到 决定 的 作用 : 晚 
出 现 的 优先 级 高 ( 参见 图 7.3.4、 图 7.3.5 和 
图 7.3.6 ) 。 例 如 ， 直 接应 用 在 HTML 元 素 上 
的 规则 ( 再 说 一 遍 ， 这 种 做 法 不 推荐 使 用 ) 
被 认为 比 外 部 样式 表 中 或 插 在 HTML 文档 顶 
部 的 特殊 性 相同 的 规则 出 现 得 更 晚 ( 因此 优 
先 级 更 高 ) 。 详 细 信 息 参 见 8.5 节 。 

如 果 这 还 不 够 ， 那 么 还 可 以 在 某 条 规则 
的 末尾 加 上 !important， 以 声明 这 个 规则 比 
其 他 规则 更 重要 ， 超 过 整个 优先 级 体系 CER 
少数 情况 以 外 ， 这 种 做 法 也 不 推荐 使 用 ) 。 

总 之 ， 在 没有 规则 的 时 候 ， 很 多 样式 都 
从 父 元 素 传递 到 子 元 素 。 当 两 个 规则 发 生 冲 
突 时 ， 规 则 更 特殊 的 优先 级 ( 即 重 要 性 ) 更 
高 (如果 不 考虑 位 置 的 话 ) 。 如 果 两 个 规则 
的 特殊 性 相同 ， 则 晚 出 现 的 优先 级 更 高 。 

如 果 感 觉 这 些 东 西 还 是 很 费解 ， 也 不 必 
担心 。 一 旦 你 真正 开始 使 用 CSS 以 及 不 同 的 
选择 器 ， 你 会 发 现 ， 在 大 多 数 情况 下 ， 层 县 
会 像 你 预期 的 那样 运行 。 


7.4 属性 的 值 


每 个 CSS 属性 对 于 它 可 以 接受 哪些 值 都 
有 不 同 的 规定 。 有 的 属性 只 能 接受 预定 义 的 
值 。* 有 的 属性 接受 数字 整数 .相对 值 百分数 、 
URL 或 者 颜色 。 有 的 属性 可 以 接受 多 种 类 型 





















































2. 预定 义 的 值 

大 多 数 CSS 属性 都 有 一 些 可 供 使 用 的 
预定 义 值 。 例 如 ，float 属性 可 被 设 为 left, 
right zk none, Ej HTML 不同, 不 需要 ( 也 不 能 ) 
将 预定 义 的 值 放 在 引号 里 ， 参 见 图 7.4.1。 














预 设 值 


mi 
border:none; 














7.4.1 很 多 CSS 属性 只 接受 预定 义 的 值 。 要 准 
确 地 输入 这 些 值 ， 并 且 不 要 加 上 引号 





3. 长 度 和 百分数 

很 多 CSS 属性 的 值 是 长 度 。 所 有 长 度 都 
必须 包含 数字 和 单位 ， 并 且 它 们 之 间 没 有 空 
格 。 例 如 3em、10px， 参 见 图 7.4.2。 唯 一 的 例 
外 是 0， 它 可 以 带 单位 也 可 以 不 带 。 














长 度 
LL 
font-size:24px; 














74.2 长度 必 须 显 式 指出 单位 。 在 单位 和 数值 
之 间 应 该 没有 空格 

有 的 长 度 是 相对 于 其 他 值 的。 一 个 em 的 
长 度 大 约 与 对 应 元 素 的 字号 相等 ， 因 此 2em 
表示 “字号 的 两 倍 ”。 ( 当 em 用 于 设置 元 素 
的 font-size 属性 本 身 时 ， 它 的 值 继承 自 对 应 
元 素 的 父 元 素 的 字号 。 ) ex 应 与 字体 的 x 字 




















的 值 。 每 个 属性 可 接受 的 值 将 在 描述 该 属性 
的 章节 《大 多 在 第 10 ERIS 11 3€ ) 列 出 来 ， 
不 过 这 里 将 讨论 基本 体系 。 


1. inherit 

对 于 任何 属性 ， 如 果 和 希望 显 式 地 指出 该 
属性 的 值 与 对 应 元 素 的 父 元 素 对 该 属性 设 定 
的 值 相同 ， 就 可 以 使 用 inherit fi. 





























高 相等 ， 也 就 是 与 这 种 字体 中 字母 x 的 高 度 
相等 。 不 过 ， 浏 览 器 对 ex 的 支持 不 是 太 好 ， 
因此 很 少 会 用 到 它 。 

像素 (px ) 并 不 是 相对 于 其 他 样式 规则 
的 。 例 如 ， 以 px 为 单位 的 值 不 会 像 以 em 为 
单位 的 值 那样 受 font-size 设置 的 影响 。 某 种 
设备 上 一 个 像素 的 大 小 不 一 定 与 另 一 种 设备 
上 的 完全 相等 。 ( 参见 Peter-Paul Koch 对 此 
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问题 的 详细 说 明 ，www.quirksmode.org/blog/ 
archives/2010/04/a pixel is_nothtml。 ) 

还 有 一 些 无 需 说 明 的 绝对 单位 ， 如 磅 
(pt ) ， 应 该 在 为 打印 准备 的 样式 表 中 保留 
这 个 单位 。 (此 外 还 有 一 些 ， 不 过 这 里 无 需 
再 提 ， 因 为 它们 在 实践 中 很 少 用 到 。 ) 一 般 
来 说 ， 应 该 只 在 输出 尺 二 已 知 的 情况 下 使 用 
绝对 长 度 (如 在 打印 的 页 面 中 使 用 pt ) 。 

百分数 (如 65% ) 的 工作 方式 很 像 em， 
它们 都 是 相对 于 其 他 值 的 值 ， 参 见 图 7.4.3。 











百分数 


== 
font-size: 80%; 











7.4.3 ”百分数 通常 是 相对 于 父 元 素 的 。 因 此 ， 
在 这 个 例子 中 ， 字 号 将 被 设 为 父 元 素 字 号 的 80% 

在 上 述 单 位 中 ， 最 常 使 用 的 是 en、 像素 
和 百分数 。 


4. 纯 数字 

只 有 极 少数 的 CSS 属性 接受 不 带 单位 的 
数字 , 如 3。 其 中 最 常见 的 就 是 1ine-height( 参 
ILKI 7.4.4) 和 z-index (分 别 参见 10.6 节 和 
11.15 节 ) 。 (另外 几 个 属性 主要 用 于 打印 和 
听觉 样式 表 ， 而 且 没 有 得 到 很 好 的 支持 。 ) 


























bs 
line-height: 1.5; 





图 7.4.4 不 要 将 数字 、 整 数 和 长 度 弄 混 。 数 字 或 
整数 没有 单位 ( 如 px ) 。 这 个 例子 中 的 值 将 与 字 
号 相 乘 ， 得 到 行 高 


5. URL 

有 的 CSS 属性 允许 开发 人 员 指 定 另 一 个 
文件 ( 尤其 是 图 像 ) 的 URL. 在 这 种 情况 下 ， 
使 用 uxl(file.ext), HB fle.ext 是 目标 资源 








的 路 径 和 文件 名 ， 参 见 图 7.4.5。 注 意 ， 规 范 
出 ， 相 对 URL 应 该 相对 于 样式 表 的 位 置 而 
不 是 相对 于 HTML 文档 的 位 置 。 








URL 


一 -一 一 
background: url(bg flax.jpg); 




















7.4.5 CSS 属性 中 的 URL 无 需 使 用 引号 包围 


























可 以 在 文件 名 上 加 上 引号 ， 但 这 不 是 必 
需 的 。 此 外 ， 在 单词 url 和 前 括号 之 间 不 应 
该 有 空格 。 括 号 和 地 址 之 间 人 允许 有 空格 ， 但 
这 不 是 必需 的 (通常 也 不 这 样 做 ) 。 

关于 编写 URL 本 身 的 信息 , 参见 1.7 节 。 


6. CSS 颜色 

有 多 种 方法 为 CSS 属 性 指定 颜色 ,首先 ( 也 
是 最 容易 的 ) ， 可 以 使 用 预定 义 的 颜色 关键 词 
作为 颜色 值 。CSS3 指定 了 16 个 基本 的 名 称 ( 参 
见 图 7.4.6 ) ， 又 增加 了 131 个 名 称 ， 从 而 组 成 
了 147 种 SVG 1.0 颜色 关键 词 。 完 整 的 列表 见 
wwWw.W3.org/TR/css3-color/Zsvg-color. 

当然 ， 除 了 几 样 最 简单 的 名 称 ， 没 
有 人 记得 住 这 些 颜 色 名 。 可 以 使 用 Adobe 
Photoshop 等 工具 进行 取 色 ， 但 它们 并 不 使 用 
CSS 颜色 名 。 在 实践 中 ， 更 常见 的 定义 CSS 
颜色 的 方法 是 使 用 十 六 进 制 格式 ( 这 是 目前 
为 止 最 为 常见 的 方式 ) 或 RGB 格式 。 后 面 将 
讲 到 ， 还 可 以 使 用 HSL 格式 指定 颜色 ， 使 用 
RGBA 和 HSLA 指定 颜色 的 透明 度 ， 这 些 都 
是 CSS3 中 新 增 的 方式 。 

* RGB 

可 以 通过 指定 红 、 绿 、 蓝 (这 也 是 RGB 
这 一 名 称 的 由 来 ) 的 量 来 构建 自己 的 颜色 。 
可 以 使 用 百分数 、0 ~ 255 之 间 的 数字 或 十 六 
进 制 数 来 指定 这 三 种 颜色 的 值 。 例 如 ， 如 果 
创建 一 种 深 紫 色 ， 可 以 使 用 89 份 红 、127 份 


















































128 € 73 CSS 构造 块 





. UUB 5k. ix BUG, RI ELS rgb(89, 0, 
FUN 如 图 7.4.7 sh 





16 种 预定 义 颜 色 





#000080 on nom #FF0000 


oa #008080 





m ietron 








图 7.4.6 CSS 中 最 常见 的 定义 颜色 的 方式 是 以 十 六 
进 制 数字 的 形式 指定 颜色 包含 的 红 、 绿 、 蓝 的 量 ( 另 
见 彩 插 ) 








颜色 中 红色 的 量 
颜色 中 绿色 的 量 


颜色 中 和 蓝 色 的 量 
Ms 
color: rgb(89, 0, 127); 











7.4.7 表示 CSS 颜色 的 另 一 种 方式 是 用 0 ~ 
255 之 间 的 数字 指示 RGB 数值 。 首 先 定义 红色 ， 
然后 是 绿色 ， 最 后 是 蓝 色 

此 外 ， 每 个 值 也 可 以 使 用 百分数 表示 ， 
不 过 这 种 做 法 很 少 用 到 ， 可 能 因为 Photoshop 





等 图 像 编辑 器 通常 用 数字 表示 RGB 值 。 如 
果 你 想 使 用 百分数 ， 可 以 将 上 面 的 颜色 写 
fF rgb(35%，0%，50%)， 因 为 89 是 255 的 
3596, 127 是 255 的 50%, 

。 十 六 进 制 

我 把 最 常用 的 方法 放 在 最 后 讲解 ， 参 见 
图 7.4.8。 将 这 些 数字 值 转化 为 十 六 进 制 ， 然 
后 将 它们 合并 到 一 起 ， 再 在 前 面 加 一 个 #， 就 
像 #59007F 这 样 。 (十 六 进 制 的 59、00、7F 
分 别 等 于 89、0、127。) 7F 和 7f 都 是 允许 
的 写法 (我 倾向 于 使 用 后 一 种 写法 ,不 过 很 
多 开发 人 员 和 设计 人 员 都 选择 前 一 种 ) 。 


























颜色 中 红色 的 量 
颜色 中 绿色 的 量 


色 中 蓝 色 的 量 
color: #59007f; 

















7.4.8 CSS 中 最 常用 的 定义 颜色 的 方式 是 用 
十 六 进 制 数 指定 颜色 所 包含 的 红 、 绿 、 蓝 的 量 























如 果 一 个 十 六 进 制 颜色 是 由 三 对 重复 的 
数字 组 成 的 ， 如 ##f3344， 可 以 缩写 为 #f34。 
这 种 做 法 也 是 一 种 最 佳 实践 ， 因 为 没有 理由 
让 代码 无 谓 地 变 长 。 

如 果 十 六 进 制 数 让 你 感到 头疼 ， 其 实 不 
用 担心 。 类 似 于 Photoshop 这 样 的 工具 在 选择 
颜色 时 可 以 显示 颜色 的 RGB 值 ， 以 及 对 应 的 
十 六 进 制 数 。 


7. CSS3 提供 的 更 多 指定 颜色 的 方式 : 
RGBA、HSLA 和 HSL 

CSS3 引入 了 男 一 种 指定 颜色 的 方式 一 一 
HSL， 以 及 通过 RGBA 和 HSLA 设置 alpha 
透明 度 的 能 力 。 (使 用 十 六 进 制 记 法 无 法 指 
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示 alpha 透明 度 。 ) 

* RGBA 

RGBA 在 RGB 的 基础 上 加 了 一 个 代表 
alpha 透明 度 (alpha transparency ) 的 A。 可 
以 在 红 、 绿 、 蓝 数值 后 面 加 上 一 个 用 以 指定 
透明 度 的 0 到 1 之 间 的 小 数 。 语 法 如 下 : 


property: rgba(red, green, blue, 
— alpha transparency); 


alpha 设置 越 接 近 0， 颜 色 就 越 透 明 。 
如 果 设 为 0， 就 是 完全 透明 的 ， 就 像 没 有 设 
置 任何 颜色 。 类 似 地 ，1 表示 完全 不 透明 。 
例如 : 


/* 不 透明 ， 和 Tgb(89，0，127); 效 果 相 同 */ 
background: rgba(89,0,127,1); 


/* 完全 透明 */ 
background: rgba(89,0,127,0); 


/* 25% 透 明 */ 
background: rgba(89,0,127,0.75); 


/* 60% 透 明 */ 
background: rgba(89,0,127,0.4); 


当然 ， 为 了 让 这 些 记 法 正常 运行 ， 

需要 将 它们 放 入 一 个 或 多 个 规则 中 (参见 
图 7.4.9 ) 。 将 alpha 透明 应 用 到 元 素 的 背景 
颜色 上 的 做 法 很 常见 ， 因 为 alpha 透明 可 以 
让 元 素 下 面 的 任何 东西 ( 如 图 像 、 其 他 颜 
色 、 文 本 等 ) 透 过 来 并 混合 在 一 起 ( 参见 图 
7.4.10) 。 也 可 以 对 其 他 基于 颜色 的 属性 使 
用 alpha i$ Hj, 如 color, border, border- 
color, box-shadow, text-shadow 等 ， 但 需要 
说 明 的 是 ， 浏 览 硕 对 它们 的 文 持 程度 并 不 相 
同 (现代 浏览 器 的 文 持 情况 较 好 ) 。 











[* 设置 重复 页 面 背景 图 像 和 默认 文字 颜色 */ 
body { 
background: url(../img/blueflax.jpg); 
color: #ff0; 


} 


/* 25% i&W] */ 
h1 { 

background: rgba(89,0,127,0.75); 
} 


/* 60% 透明 */ 
h2 { 

background: rgba(89,0,127,0.4); 
} 


/* 纯色 背景 (不 透明 ) V 
h3 ( 
background: rgb(89,0,127); 











7.4.9 这 份 简单 的 样式 表 对 整个 页 面 应 用 了 一 
个 重复 显示 的 背景 图 ， 设 置 了 默认 文字 颜色 ， 并 对 
hi ~ h3 标题 添加 了 不 同 的 背景 。 现 代 浏 览 器 显示 
的 结果 如 图 7.4.10 所 示 。 正 如 你 即将 了 解 到 的 ， 
IE9 之 前 的 Internet Explorer 版 本 不 支持 RGBA， 
此 它们 会 忽略 对 hl 和 hz2 的 声明 








?) RGBA Example - Mozilla Firefox 
File Edi View History Bookmarks Tools Help 





|_| RGBA Example 





Y m NSE Y 


7.4.10 ”这 个 示例 不 够 真实 但 很 有 效 ， 从 中 我 们 
可 以 看 到 页 面 背 景 图 透 过 了 前 两 个 标题 的 背景 ， 但 
没有 透 过 最 后 一 个 标题 的 背景 。 这 三 个 标题 的 背景 
色 都 是 一 样 的 ， 但 由 于 alpha 透明 度 不 同 ， 它 们 看 
起 来 就 像 是 深浅 不 同 的 三 种 紫色 。( 文字 是 黄色 的 ， 
这 是 由 为 body 元 素 设置 的 color 属性 传递 下 来 的 ， 
除非 为 男 一 个 元 素 设 置 的 样式 规则 覆盖 它 ， 否 则 页 
面 上 所 有 的 文字 都 会 显示 为 黄色 。 ) ( 男 见 彩 插 ) 
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如 你 所 见 ， 尽 管 RGB 颜色 值 是 一 样 的 ， 
但 由 于 设置 了 不 同 程度 的 透明 度 ， 颜 色 在 浏览 
器 中 显示 的 样子 就 不 一 样 了 ,如 图 7.4.10 所 示 。 


HSL 和 HSLA 

HSL 和 HSLA 也 是 CSS3 中 新 增 的 。 
HSLA 是 除 RGBA 以 外 为 颜色 设置 alpha 3$ 
明度 的 另 一 种 方式 。 用 HSLA 指定 alpha 3$ 
明度 的 方法 与 RGBA 是 一 致 的 。 待 会 儿 再 看 
HSLA， 先 看 看 HSL 是 怎样 运行 的 。HSL fX 
表 色 相 (hue) 、 饱 和 度 (saturation ) 和 亮度 
(lightness ) ， 其 中 色相 的 取 值 范围 为 0 ~ 
360， 饱 和 度 和 亮度 的 取 值 均 为 百分数 ， 范 于 
为 0 ~ 100%， 如 图 7.4.11 所 示 。 在 CSS 中 ， 
语法 为 : 


property: hsl(hue, saturation, lightness); 






































color: hsl(282, 10096, 2596); 











7.4.11 对 HSL 格式 的 分 解 


你 可 能 猜 到 了 ，HSLA 的 格式 为 : 


property: hsla(hue, saturation, 
> lightness, alpha transparency); 


fh 4n, F ifi Hj HSLA 和 HSL 表 示 与 
图 7.4.9 rH RGBA 和 RGB 的 例子 相同 的 紫色 : 


/* 2596 透明 */ 
hi ( 
background: hs1a(282,10096,2596,0.75); 


} 


/* 60% 透明 */ 
h2 { 
background: hsla(282,100%,25%,0.4); 





} 


/* 纯色 背景 (不 透明 ) X 
h3 { 
background: hs1(282,100%,25%); 


} 

在 现代 浏览 器 中 的 效果 与 图 7.4.10 所 示 
的 一 样 。 

可 以 将 色相 值 想 成 一 个 圆 环 中 的 度数 ，0 
和 360 在 顶端 相遇 。 这 意味 着 0 和 360 均 表 示 
同一 种 颜色 ( 红色 ) 。( 不 要 将 HSL 与 HSB (又 
称 HSV OHR, 它们 是 相似 的 , 但 并 不 相同 。) 


如 何 构 想 HSL 
学 习 HSL 的 逻辑 需要 花 些 时 间 ， 但 
是 一 旦 找到 感觉 ， 你 会 发 现 它 比 其 他 的 格 
式 更 容易 使 用 。Brandon Mathis 在 其 HSL 
Color Picker 网 站 ( http://hslpicker.com ) 的 
“为 何 使 用 HSL” 部 分 对 这 种 格式 有 一 段 
精彩 的 解释 。 他 写 道 : 
“选择 一 个 0 到 360 之 间 的 
色相 ， 并 将 饱和 度 设 为 100， 亮 度 
设 为 50， 就 会 得 到 这 种 颜色 最 纯 
的 形式 。 降 低 饱 和 度 ， 颜 色 就 会 
向 灰色 变化 。 增 加 亮度 ， 颜 色 就 
会 向 白色 变化 ; 减少 亮度 ， 闫 色 
就 会 向 黑色 变化 。” 
随 着 你 在 圆 环 上 移动 ， 可 以 得 到 一 些 
不 同 的 颜色 ， 例 如 : 
O 红色 为 hs1(0,100%,50%) ; 
口 黄色 为 hs1(60,100%,50%) ; 
口 绿 色 为 hs1(120, 10096, 5096) ; 
口 青 色 为 hs1(180, 10096, 5096) ; 
口 蓝 色 为 hs1(240,100%,50%) ; 
O 紫红 色 为 hs1(300,100%,50%) ; 





CD HSB 中 的 B 表示 明度 (brightness )，HSV 中 的 V 表示 亮度 (value )。 一 一 译 者 注 
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并 非 所 有 的 图 像 编 辑 器 都 可 以 在 对 话 框 
中 指定 HSL ( 可 以 为 Photoshop 安装 一 个 插 
JF) 。 不 过 ， 通 过 Mathis 强大 的 免费 在 线 工 
具 HSL Color Picker， 可 以 选取 颜色 ， 获 取 其 
HSL 值 、 十 六 进 制 数值 和 RGB 值 ， 还 可 以 输 
和 人 这些 格式 的 颜色 值 ， 查 看 颜色 的 变化 。 另 
一 种 类 似 的 工具 位 于 www.workwithcolor.com/ 
hsl-colorpicker-01.htm。 它 显示 了 一 个 颜色 圆 
环 ， 帮 你 更 好 地 理解 HSL。 ( 相 较 而 言 ，HSL 
Color Picker 将 颜色 显示 在 一 条 直线 上 。 ) 通 
过 在 线 搜索 还 可 以 找到 更 多 其 他 的 颜色 工具 。 

















Internet Explorer 中 的 RGBA、HSL 和 
HSLA 

不 幸 的 是 ， 如 同 标 准 世 界 那些 最 新 的 
发 展 常 常 遭 遇 的 情形 , IE9 之 前 的 Internet 
Explorer 版 本 均 不 支持 上 述 功能 。 它 们 无 法 理 
解 这 些 记 法 ， 因 此 会 忽略 这 些 声明 。 

对 于 IE9 之 前 的 版 本 ， 通 过 一 些 变 通 的 方 
法 可 以 使 用 RGBA 和 HSLA。 但 HSL 还 是 用 不 
了 ， 因 此 只 能 继续 使 用 十 六 进 制 数 (或 RGB ) 
指定 颜色 。 在 正 9 之 前 的 版 本 中 使 用 RGBA 和 
HSLA 有 三 种 选择 〈 但 一 次 只 能 选择 一 种 ) 。 

口 什么 都 不 做 ， 让 页 面 在 这 些 版 本 中 看 

起 来 完全 不 一 样 。 

a 为 它们 提供 后 备 的 颜色 声明 ， 即 显示 纯 

色 ， 而 不 是 透明 的 颜色 ， 参 见 图 74.12。 

口 通 过 为 它们 指定 一 些 专门 的 声明 模 
拟 alpha 透明 。 这 些 声 明 多 为 特有 
的 CSS。 现 代 浏 览 右 仍 将 使 用 标准 的 
CSS, ZILE 7.4.13。 























/* background 声明 的 顺序 是 很 重要 的 。IE 的 旧版 
本 使 用 第 一 条 声明 ， 而 现代 浏览 器 对 这 两 条 声 
明 都 理解 ， 但 仅 应 用 第 二 条 声明 ( 因为 它 在 最 
Ne M 


h1 { 
background: #59007f; 
background: rgba(89,0,127,0.75); 
} 











7.4.12 ”现代 浏览 器 以 RGBA 声明 呈现 颜色 ， 
因为 这 条 声明 出 现在 默认 的 十 六 进 制 背景 设置 的 后 
面 (现代 浏览 器 也 理解 十 六 进 制 的 设置 ， 因 此 顺序 
就 很 重要 了 ) 。 但 IE9 之 前 的 下 版 本 不 理解 这 种 
记 法 ， 它 们 会 忽略 RGBA 设置 ， 因 此 十 六 进 制 背 
景 颜 色 会 生效 。 也 可 以 使 用 RGB ( 并 非 RGBA ) 
替代 第 一 行 里 的 十 六 进 制 数 ， 但 正如 上 文 提 到 过 
的 ， 十 六 进 制 数 是 最 常用 的 指定 不 透明 颜色 的 
方式 









































/* 如 果 你 像 我 一 样 ， 早 就 想 寻 了。 除了 第 二 条 声明 
全 以 外 ， 其 他 所 有 的 声明 都 是 为 IE 的 旧版 本 模拟 
> alpha 透明 的 。 */ 


h1 { 
background: transparent; 
background: rgba(89,0,127,0.75); 


/* IE8 */ 

-ms-filter: 
"progid:DXImageTransform. 

> Microsoft.gradient(startColorstr= 
 3BF59007F, endColorstr-iBF59007F)"; 


/* IE6 和 7 */ 

filter: progid:DXImageTransform. 

^ Microsoft.gradient(startColorstr- 
 :tBF59007F, endColorstr-iBF59007F); 


zoom: 1; 








} 





7.4.43. KER! 这 有 段 为 IE9 之 前 版 本 准备 的 
元 长 的 代码 “三 明治 ”将 标准 RGBA 记 法 (未 突 
出 显示 ) 包围 起 来 。 旧 版 本 的 TE. 照例 会 忽略 它们 
不 理解 的 声明 。 类 似 地 ， 现 代 浏 览 器 会 忽略 它们 不 
理解 的 -ms-filter, filter 和 zoom 值 。 要 确保 这 段 
代码 正常 工作 ， 声 明 的 顺序 很 重要 
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最 后 一 种 选择 结合 使 用 了 Internet 
Explorer 的 Gradient 滤 镜 和 一 些 不 为 其 他 浏览 
器 所 理解 的 专 有 代码 。 这 意味 着 现代 浏览 
将 忽略 这 些 声 明 ， 还 是 使 用 标准 的 记 法 (在 本 
例 中 为 background: rgba(89,0,127,0.75);, 
它 覆 盖 了 之 前 的 background [H ) 。 注 意 这 些 
声明 应 以 所 示 的 顺序 排列 ， 从 而 使 它们 在 现 
代 浏 览 器 和 旧 的 浏览 器 中 都 能 正常 工作 C 
见 图 7.4.13 ) o 

我 不 会 费力 去 解释 下 Gradient 滤 镜 的 语 
法 ， 因 为 它们 极其 令 人 费解 ， 你 几乎 不 可 能 
手写 这 些 代码 。 我 也 不 会 这 样 做 。 不 过 ,一 
些 免 费 的 在 线 工 具 可 以 帮 到 你 ( 随 着 你 深入 
学 习 CSS3 ， 你 将 看 到 更 多 这 样 的 工具 ) 。 

Michael Bester 的 RGBa & HSLa CSS 
Generator for Internet Explorer ( http://kimili. 








com/jJournal/rgba-hsla-css-generator-for-internet- 
explorer) 就 是 这 样 一 款 工 具 。 据 其 解释 ， 你 
输入 RGBA 或 HSLA 声明 后 ， 该 工具 就 能 创 
建 等 价 的 为 IE9 之 前 的 版 本 准备 的 CSS。 然 后 ， 
将 它们 复制 到 你 的 样式 表 中 即 可 。 注 意 : 该 
工具 创建 的 代码 不 包含 为 现代 浏览 器 准备 的 




















标准 RGBA 或 HSLA 声明 。 因 此 ， 你 需要 自 
己 将 它 直接 添加 到 background: transparent; 
的 后 面 ， 如 图 7.4.13 所 示 。 同 时 ， 如 Michael 
指出 的 ， 也 可 以 将 为 IE9 之 前 的 版 本 准备 的 
CSS 放 到 单独 的 样式 表 中 ， 再 通过 所 谓 的 条 
件 注 释 (conditional comment ) 将 它们 加 载 
进来 (详细 信息 参见 http://reference.sitepoint. 
com/css/conditionalcomments ) 。 























Internet Explorer 滤 镜 ( 如 图 7.4.13 所 
示 的 Gradient 滤 镜 ) 会 影响 浏览 器 的 性 能 ， 
因为 它们 需要 额外 的 处 理 能 力 。 如 果 页 面 中 
只 有 少量 的 元 素 应 用 了 滤 镜 ， 也 不 会 产生 明 
显 的 问题 ， 但 如 果 滤 镜 的 数量 较 多 ， 就 可 能 
产生 延 时 。 是 否 产 生 延 时 也 取决 于 页 面 内 的 
其 他 元 素 。 因 此 ， 构 建 页 面 的 时 候 要 注意 这 
一 点 ， 如 果 你 在 卫 中 看 到 页 面 明显 变 慢 ， 可 
以 关 掉 滤 镜 看 看 是 不 是 由 它 引 起 的 问题 。IE 
滤 镜 有 时 还 会 产生 其 他 一 些 意 想不到 的 副 作 
用 ， 如 对 文本 呈现 的 质量 产生 不 良 影 响 。 需 
要 说 明 的 是 ， 这 些 滤 镜 不 会 影响 到 其 他 的 浏 
览 器 ， 因 为 其 他 浏览 器 并 不 理解 它们 。 


第 8 章 
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本 章 内 容 

口 创建 外 部 样式 表 

口 链接 到 外 部 样式 表 

口 创建 谋 入 式样 式 表 

口 应 用 内 联 样 式 

口 位 置 的 重要 性 

口 使 用 与 媒体 相关 的 样式 表 
口 提供 替代 的 样式 表 

口 借鉴 其 他 人 的 灵感 : CSS 











在 开始 定义 样式 表 之 前 ， 要 知道 如 何 创 
建 和 使 用 包含 这 些 样式 的 文件 。 在 本 章 中 ， 
你 将 学 习 如 何 创建 样式 表 文 件 ， 如 何 将 CSS 
应 用 到 多 个 网 页 (包括 整个 网 站 ) 、 单 个 
页 面 或 单独 的 HTML 元 素 。 这 三 种 应 用 分 
别 通 过 三 种 方法 实现 : 外 部 样式 表 ( 首选 方 
法 ) 、 骨 入 样式 表 和 内 联 样 式 (最 不 可 取 的 
Jk). 

在 随后 的 几 章 ， 你 将 学 习 如 何 创建 样式 
表 中 的 内 容 。 


8.1 创建 外 部 样式 表 


外 部 样式 表 非 常 适合 给 网 站 上 的 大 多 数 
页 面 或 者 所 有 页 面 设 置 一 致 的 外 观 。 可 以 在 
一 个 外 部 样式 表 中 定义 全 部 样式 ， 然 后 让 网 
站 上 的 每 个 页 面 加 载 这 个 外 部 样式 表 ， 从 而 

















确保 每 个 页 面 都 有 相同 的 设置 。 尽 管 后 面 你 
将 学 到 骨 入 样式 表 和 内 联 样式 表 , 但 从 外 部 
样式 表 为 页 面 添加 样式 才 是 最 佳 实践 ， 推 荐 
你 使 用 这 种 方法 〈 允许 偶尔 的 例外 ) 。 


创建 外 部 样式 表 

(1) 在 文本 编辑 器 中 创建 一 个 新 文档 ， 如 
图 8.1.1 所 示 。 

(2) 按照 第 7 章 的 讲解 ， 为 网 页 定义 样式 
规则 。 同时, 根据 需要 在 CSS 中 添加 注释 A 
见 图 8.1.1) o 

(3) 将 文档 以 纯 文 本 格式 保存 在 希望 放置 
的 目录 中 。 尽 管 任何 名 称 都 是 允许 的 ， 但 应 
该 为 该 文件 添加 .css 的 扩展 名 ， 表 明 这 是 一 
个 层 埃 样式 表 ， 如 图 8.1.2 所 示 。 





























久 untitled - Notepad 
File Edit Format View Help 
@charset "UTF-8"; 


. -inix 





/* A simple style sheet */ 


img 1 
} 
| za 


border: 4px solid red; 














图 8.1.1 使 用 任何 你 喜欢 的 文本 编辑 器 创建 样式 
表 。 这 是 记事 本 (一 种 旧版 本 ) 。 大 多 数 人 在 创建 
HTML 和 CSS 文档 时 使 用 相同 的 编辑 器 。/# */ 之 
间 的 文本 是 CSS 注释 , 它 既 不 会 影响 页 面 的 显示 ， 
也 不 会 出 现在 页 面 中 
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File name: [pase css bd | 8 . 2 链 接 到 外 部 样 式 表 

ave as type: ext Documents [tx bd xk —ks zE 
Te ones Ch : 创建 了 样式 表 ( 参见 图 82.1) 之 后 ， 需 
图 8.1.2 一 定 要 将 CSS 文件 保存 为 以 .css 为 扩展 。” 要 将 它 加 载 到 HTML 页 面 中 去 ， 从 而 为 内 容 


名 的 纯 文本 格式 文件 ( 可 能 称 为 Text Document, 
Plain Text, ASCII 等 ) 


CES WAVXMEMOLAÁCAM AGO XAR. 
base.css 和 global.css 是 两 种 常见 的 样式 表 名 
称 ， 它 们 通常 包含 应 用 于 网 站 大 多 数 页 面 的 
样式 规则 。 网 站 制作 者 通常 创建 一 些 为 某 些 
区 块 所 特有 的 附加 CSS 文件 ， 作 为 对 基本 
样式 的 补充 。 例 如 ， 对 于 一 个 商业 网 站 ， 
products.css 包含 的 可 能 是 为 产品 相关 页 面 准 
备 的 样式 规则 。 无 论 选择 什么 文件 名 ， 一定 
不 要 包含 空格 。 


外 部 样式 表 要 么 是 通过 链接 引用 的 
( 如 8.2 节 中 介绍 的 ) ， 要 么 是 导入 的 【通过 
@import ) ， 不 过 不 推荐 你 导入 它们 。@import 
指令 会 影响 页 面 的 下 载 速度 和 呈现 速度 ,在 
Internet Explorer 中 影响 更 为 明显 (参见 Steve 
Souders 对 此 问题 的 讨论 : www.stevesouders. 
com/blog/2009/04/09/dont-use-import/ ) 。 


样式 表 开 头 处 的 @charset 并 不 总 是 
必需 的 ， 不 过 ， 总 是 在 样式 表 中 包含 它 也 没 
有 任何 坏处 ， 参 见 图 8.1.1。 不 过 ， 如 果 样 式 
表 中 包含 非 ASCII 字符 (使 用 CSS 生成 内 容 
(一 项 高 级 主题 ) 或 名 称 中 含有 特殊 字符 的 
Web 字体 时 就 会 遇 到 这 种 情况 ) ， 就 必须 包 
含 它 。 出 于 这 种 原因 ， 你 可 以 选择 总 是 包含 @ 
charset， 以 免 后 来 样式 表 需 要 它 时 再 回 过 头 
来 添加 ， 此 外 ,一定 要 将 它 放 在 样式 表 的 第 
一 行 ,不 过 ,不 要 在 嵌入 样式 表 或 内 联 样式 ( 本 
章 后 文 会 讲 到 ) 中 包含 @charset。 


应 用 这 些 样式 规则 。 要 做 到 这 一 点 ， 最 好 的 
方式 是 链接 到 样式 表 (参见 图 8.2.2 ) 。 





Gcharset "UTF-8"; 


img ( 
border: 4px solid red; 














8.2.4 这 是 本 章 前 面 创建 的 外 部 样式 表 base.css 

(去 掉 了 注释 “A simple style sheet”， 这 对 HTML 
的 显示 不 会 产生 任何 影响 ) 。 不 必 担 心 不 理 解 这 里 
的 属性 和 值 ( 它们 表示 “为 所 有 的 img 元 素 创 建 红 
色 的 实 线 边框 ” ) 。 




















«IDOCTYPE html» 

«html lang-"en"» 

«head» 
«meta charset-"UTF-8" /> 
«title»El Palau de la Müsica«/title» 
«link rel-"stylesheet" 
 hrefz"base.css" /> 

«/head» 

«body» 

«article» 
«hi»El Palau de la Müsica«/hi» 


«img src-"img/palau250.jpg" width-"250" 
— height-"163" alt-"El Palau de la 
— Música" /» 
«img src-"img/tickets.jpg" width-"87" 
— height-"163" alt-"The Ticket Window" /> 
<p>I love the «span lang-'es"»Palau de la 
— Müsica«/span». It is ornate and gaudy 
— and everything that was wonderful 
— about modernism. It's also the home 
— of the «span lang-'es"»Orfeó Català 
— </span>, where I learned the benefits 
— of Moscatell.«/p» 

«article» 

«/body» 

</html> 











8.2.2 1link 元 素 位 于 HTML 文档 的 head 部 分 。 
页 面 可 以 包含 一 个 以 上 的 link 元 素 ， 但 使 用 它 的 
次 数 最 好 尽 可 能 地 少 ， 让 页 面 得 以 更 快 地 加 载 
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链接 到 外 部 样式 表 的 步骤 

(1) 在 每 个 希望 使 用 样式 表 的 HTML. 页 面 
的 head 部 分 , 输入 «link rel="stylesheet", 

(2) 输入 一 个 空格 ,然后 输入 href-"url. 
css", KB url.css 是 CSS 样式 表 的 名 称 (2 
见 上 一 节 )。 

(3) 输入 一 个 空格 和 />。 ( 如 果 你 愿意 ， 也 
可 以 不 输入 空格 ， 直 接 输入 >; 这 两 种 形式 都 











是 HTML5 所 允许 的 , 它们 的 效果 也 完全 一 样 。) 


对 外 部 样式 表 进 行 修改 时 ， 所 有 引 
用 它 的 页 面 也 会 自动 更 新 (参见 图 8.2.3 和 
图 8.2.4) 。 这 是 外 部 样式 表 的 神奇 力量 ! 








El Palau de la Música - Mozilla Firefox: 


Ele Edt View History Bookmarks Tools Help 





| E Palau de la música 


E —— — — 





El Palau de la Música 





Ilove the Palau de la Música. It is ornate and gaudy and everything 
that was wonderful about modernism. It's also the home of the 
Orfeó Català, where I learned the benefits of Moscatell 





8.2.8 将 这 个 样式 规则 (4 像素 宽 的 红色 实 线 
边框 ) 应 用 于 每 个 img 元 素 ( 另 见 彩 插 ) 








外 部 样式 表 的 另 一 个 好 处 是 ， 一 旦 浏 
览 TP 个 页 面 加 载 了 它 ， 在 随后 浏览 引用 


oan 通常 无 需 再 向 Web 服务 器 请 求 
该 文件 。 浏 览 器 会 将 它 保存 到 缓存 里 ， 也 就 
是 保存 到 用 户 的 计算 机 里 ， 并 使 用 这 个 版 本 
的 文件 。 这 样 做 可 以 加 快 对 页 面 的 加 载 。 不 过 ， 
不 必 担 心 。 如 果 随 后 对 样式 表 作 了 修改 ， 再 
将 它 传 到 Web 服务器， 浏览 器 就 会 下 载 更 新 
后 的 文件 ， 而 不 是 使 用 缓存 的 文件 (从 技术 
上 讲 也 有 例外 ， 但 通常 不 会 遇 到 这 种 情况 ) 。 


Sunflowers - Mozilla Firefox 


File Edt View History Bookmarks Tools Help 


| L] Sunflowers | * | 4 








Sunflowers 





There are fields and fields of sunflowers, that turn with the passing 
ofthe sun. 





图 8.2.4 其 他 文档 也 可 以 链接 到 同一 个 样式 表 ， 
并 拥有 同样 的 样式 ( 男 见 彩 插 ) 








出 于 简化 的 目的 ， 这 个 例子 中 的 链 
接 假 定 HTML 页 面 与 base.css 位 于 同一 个 目 
录 (参见 图 8.2.2) 。 不 过 ， 实 践 中 最 好 将 样 
人 而 不 是 与 HIML 页 

面 混 在 一 起 。 常 见 的 样式 表 文 件 夹 名 称 包 
括 css、 di 等 ， 你 也 可 以 按照 自己 的 意愿 
对 其 进行 命名 ， 只 要 你 认为 该 名 称 放 在 链接 
的 href We 合适 的 。 人 例如， 如果 base.css 
位 于 名 为 css 的 文件 夹 里 ， 而 HIML 位 于 该 
文件 夹 的 上 一 级 ， 那 么 link 元 素 就 应 该 写 
fk «link rel="stylesheet" href="css/base. 
ss" /», 


外 部 样式 表 里 的 URL 是 相对 于 服务 
器 上 该 样式 表 文件 的 位 置 的 ， 而 不 是 相对 于 
HTML 页 面 的 位 置 的 。 你 将 在 第 10 章 学 习 
CSS 背景 图 像 时 看 到 有 关 的 实例 。 


外 部 样式 表 中 的 规则 可 能 被 HTML 
文档 内 的 样式 履 盖 。8.5$ 节 中 总 结 了 以 不 同方 
式 应 用 的 样式 的 相对 影响 力 。 
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6E 国 可 以 同时 链接 到 多 个 样式 表 。 如 果 不 
同 的 文件 中 有 相互 冲突 的 显示 规则 ， 则 靠 后 
的 文件 中 的 规则 具有 更 高 的 优先 级 。 


CHES 可 以 为 链接 的 样式 表 提 供 替 代 版 本 ， 
让 访问 者 从 中 选择 。 参 见 8.7 节 。 


GENES 可 以 通过 设置 media 属性 将 样式 表 限 
制 在 特定 类 型 的 输出 上 。 详细 信息 参见 8.6 节 。 


HTML 早期 版 本 要 求 在 link 元 素 定 
义 中 包含 type="text/css"， 但 HTMLS 不 要 
求 这样 做 ， 因 此 可 以 像 代 码 示例 那样 忽略 它 。 


8.3 PERMER 


舱 入 样式 表 是 在 页 面 中 应 用 CSS 的 第 二 种 
方式 。 它 允许 在 HTML 文档 里 直接 设置 样式 ( 通 
常 位 于 head 部 分 ) ， 如 图 8.3.1 所 示 。 由 于 这 
些 样式 只 在 一 个 网 页 里 存在 ， 因 此 不 会 像 外 部 
样式 表 中 的 规则 那样 应 用 到 其 他 的 页 面 , 同时 ， 
缓存 的 好 处 也 不 存在 了 。 如 上 文 所 述 ， 对 于 大 
多 数 情况 ， 外 部 样式 表 是 推荐 的 方式 ， 但 理解 
其 他 的 选择 以 备 不 时 之 需 也 是 很 重要 的 。 


61 & Ez AN FEES RE B RE 

(1) ft HTML X fij fj head RB 4) fij A 
«style», 

(2) 根据 需要 ， 定义 任意 数量 的 样式 规则 
(参见 7.1 节 ) 。 

(3) 输入 </style> Zi Rp A FEX (ZIL 
图 8.3.1) 。 




















当 且 仅 当 style 元 素 出 现在 link 元 素 
后 面 的 时 候 ， 误 入 样式 表 中 的 样式 才 会 履 盖 
外 部 样式 表 中 的 样式 。 详 细 信 息 参 见 8.5 节 。 





<head> 
«meta charset-"UTF-8" /> 
«title»El Palau de la Müsica«/title» 
«style» 
img ( 
border: 4px solid red; 
) 
«/style» 
«/head» 
«body» 


«img src-"img/palau250.jpg" width-"250" 

— height-"163" alt-"El Palau de la 

— Música" /> 

«img src-"img/tickets.jpg" width-"87" 

— height-"163" alt-"The Ticket Window" /> 


«/body» 

















«/html» 
8.3.4. EMRARREN, style 元 素 及 其 包围 








的 样式 规则 通常 位 于 文档 的 head 部 分 。 浏 览 器 对 
页 面 的 呈现 方式 与 使 用 外 部 样式 表 时 是 一 样 的 ， 参 
见 图 8.3.2。 注 意 ， 舱 入 样式 表 不 应 在 其 开头 处 (或 
其 他 任何 位 置 ) 包含 echarset 声明 


























lolx 


El Palau de la Música - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 
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El Palau de la Música 





t E AE 


Ilove the Palau de la Música. Itis ornate and gaudy and everything 
that was wonderful about modernism. It's also the home ofthe 
Orfeó Català, where I learned the benefits of Moscatel. 











图 8.3.2 
全 一 样 。 区 别 在 于 ， 其 他 网 页 无 法 利用 这 个 页 面 中 


结果 与 链接 到 外 部 样式 表 中 的 样式 时 完 




















定义 的 样式 
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CHJES 谈 入 样式 表 是 为 页 面 添 加 CSS 的 次 选 
方式 。( 也 有 例外 的 情况 ， 如 特定 条 件 下 拥 
有 极 大 流量 的 网 站 。) 推荐 的 方法 是 加 载 外 
部 样式 表 。 更 多 信息 参见 8.2 节 。 


还 可 以 直接 对 单个 HTML 元 素 应 用 
样式 ， 但 强烈 建议 不 要 这 样 做 。 详 细 信息 参 
见 8.4 节 。 


EED 从 技术 上 说 ， 在 页 面 的 body AR 
入 样式 表 也 是 可 行 的 ， 但 应 尽 可 能 避免 这 种 


做 法 。 将 内容 (HTML) 、 表 现 (CSS ) 和 
行为 (JavaScript) 分 离 是 一 种 最 佳 实 践 ， 
而 将 HTML 和 CSS 混在 一 起 就 会 打破 这 种 
原则 。 从 实际 情况 来 看 ， 在 外 部 样式 表 中 
维护 CSS 比 在 说 入 样式 表 中 维护 CSS 更 为 


容易 。 


8.4 应 用 内 联 样式 


内 联 样 式 是 在 HTML 中 应 用 CSS 的 第 三 
种 方式 。 不 过 ， 应 当 最 后 考虑 这 种 方式 ， 因 
为 它 将 内 容 (HTML ) 和 表现 (CSS) 混在 了 
一 起 ,严重 地 违背 了 最 佳 实践 ,如 图 8.4.1 所 示 。 
内 联 样式 只 影响 一 个 元 素 ， 如 图 8.4.2 所 示 ， 
因此 使 用 它 将 失去 外 部 样式 表 的 重要 好 处 : 
一 次 编写 ， 到 处 可 见 。 设 想 要 对 大 量 HTML 
做 简单 的 文字 颜色 的 改变 ， 就 需要 对 这 些 页 
面 逐 一 进行 检查 和 修改 ， 可 见 内 联 样 式 不 被 
经 常 使 用 的 原因 。 

不 过 ， 如 果 你 想 快 速 地 测试 某 种 样式 ， 
以 便 随 后 将 它 从 HTML 中 搬 到 更 易于 长 期 维 
护 的 外 部 样式 表 中 ( 假定 你 对 结果 满意 ) ， 
内 联 样式 就 能 派 上 用 场 了 。 














«head» 

«meta charset-"UTF-8" /» 

«title»El Palau de la Müsica«/title» 
«/head» 
«body» 


«img src-"palau250.jpg" width-"250" 

— height-"163" alt-"El Palau de la 

> Música" style="border: 4px solid 
> red" /> 

<img src="tickets.jpg" width="87" 

— height="163" alt="The Ticket Window" /» 


«/body» 











«/html» 
8.4. 内 联 样式 规则 只 影响 单个 元 素 ( 在 本 例 





中 为 第 一 个 img 元 素 ) 


El Palau de la Música 


- Mozilla Firefox 





Eile Edt View History Bookmarks Tools Help 
[ LI et Palau de la música |+ z 








El Palau de la Música 
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Ilove the Palau de la Música. It is ornate and gaudy and everything 
that was wonderful about modernism. It's also the home of the 
Orfeó Català, where I learned the benefits of Moscatell 











8.4.2 只 有 第 一 个 图 像 拥有 边框 。 如 果 要 让 其 
他 元 素 也 有 这 种 效果 ， 就 要 在 每 个 img 元 素 中 单独 
加 上 style="border: 4px solid red"。 如 你 所 见 ， 
内 联 样 式 的 效率 很 低 ， 对 全 站 的 内 联 样式 统一 进行 
更 新 是 一 件 很 头疼 的 事 














应 用 内 联 样式 的 步骤 

(1) 在 希望 进行 格式 化 的 HTML 元 素 中 ， 
输入 style="。 

(2) 创建 一 个 样式 规则 ， 但 不 要 包含 花 括 
号 和 选择 器 。 不 需要 选择 器 是 因为 直接 将 样 
式 放 入 目标 元 素 中 了 。 
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(3) 要 创建 其 他 样式 定义 , 输入 ; (分 号 ) 
并 重复 第 (2) 步 。 

(4) 输入 后 引号 " 
注意 ， 不 要 将 等 号 与 冒号 弄 混 。 由 于 
它们 都 表示 赋值 ， 因 而 很 容易 不 小 心 用 错 。 


SEE 不 有 要 忘 了 用 分 号 分 隔 多 条 属性 定义 。 


不 有 要 忘 了 用 引号 包围 样式 定义 。 

内 联 样式 的 优先 级 高 于 其 他 所 有 样 
式 ， 除 非 其 他 地 方 与 之 冲突 的 样式 标记 了 
limportant (参见 8.5 节 ) 。 


如 果 要 在 内 联 样 式 声明 中 指定 字体 ， 
对 于 有 多 个 单词 的 字体 名 称 ， 要 用 单 引 号 包 
围 ， 以 避免 与 style 元 素 的 双 引 号 发 生 冲 突 。 
不 能 在 这 两 个 地 方 使 用 相同 类 型 的 引号 。 


CNES 或 许 内 联 样式 最 为 常见 的 使 用 场景 是 
在 JavaScript 函数 中 为 元 素 应 用 内 联 样式 ， 从 
而 为 页 面 某 个 部 分 添加 动态 行为 。 可 以 通过 
Firebug 或 Chrome 的 开发 者 工具 查看 这 些 生 
成 的 内 联 样 式 。 在 大 多 数 情况 下 ， 应 用 这 些 
样式 的 JavaScript I] HTML 是 分 离 的 ， 因 而 
仍然 保持 了 内 容 (HTML) , IL (CSS) 和 
{TA (JavaScript ) 分 离 的 原则 。 


8.5 位 置 的 重要 性 


将 多 个 样式 规则 应 用 于 同一 元 素 的 情况 
并 不 少见 ， 大 型 网 站 更 是 如 此 ( 对 于 它们 ， 
需要 更 多 的 精力 去 维护 CSS) 。 正 如 在 7.3 75 
中 提 到 的 ， 样 式 的 位 置 可 以 打破 继承 和 特殊 
性 之 间 的 僵局 。 基 本 规则 是 : 在 其 他 条 件 相 























同 的 情况 下 ， 越 晚 出 现 的 样式 优先 级 越 高 ， 
或 者 说 越 重 要 ( 参见 图 8.5.1 至 图 8.5.4 ) 。 

因此 ， 内 联 样式 拥有 最 高 的 优先 级 ， 它 
将 覆盖 其 他 任何 位 置 与 之 冲突 的 样式 。 

ERAH style 元 素 中 ， 任 何 @import 规 
则 都 会 被 同一 style 元 素 中 出 现 的 单独 样式 规 
Vui s ( 因为 根据 定义 ， 这 些 样式 规则 必须 
出 现在 Qimport 规则 后 面 ) 。 








<head> 
«title»El Palau de la Müsica«/title» 
«link rel="stylesheet" 
> hrefz"base.css" /> 
«style» 
img ( 
border-style: dashed; 
) 
«/style» 
«/head» 











图 8.5.1 在 这 个 例子 中 ，style 元 素 出 现 得 最 晚 。 
因此 ， 它 的 规则 的 优先 级 比 base.css 样式 表 中 的 
高 (在 有 冲突 的 规则 的 继承 性 和 特殊 性 相同 的 情 
况 下 ) 
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图 8.5.2 
的 base.css 中 定义 的 实 线 边框 


style 元 素 中 定义 的 虚线 边框 优先 于 链接 
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«head» 

<title>El Palau de la Másica«/title» 

«style» 

img ( 

border-style: dashed; 

) 

«/style» 

«link rel="stylesheet" href-"base. 
css" /> 
«/head» 











8.5.8 这 里 ， 链 接 的 样式 表 最 后 出 现 ， 其 优先 
级 高 于 style 元 素 中 的 规则 ( 在 其 他 情况 都 相同 的 
时 候 
















?) El Palau de la Música - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 
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El Palau de la Música 
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Ilove the Palau de la Música. It is ornate and gaudy and everything 
that was wonderful about modernism. It's also the home of the 
Orfeó Català, where I learned the benefits of Moscatel. 





8.5.4  base.css 样式 表 中 定义 的 实 线 边框 优先 于 
内 部 style 元 素 中 定义 的 虚线 边框 

EKA KY style 元 素 与 任何 链接 的 外 部 样 
式 表 之 间 的 关系 取决 于 它们 的 相对 位 置 。 如 
果 link 元 素 在 HTML 代码 中 出 现 得 晚 ， 它 就 
会 覆盖 style 元 素 。 如果 link 元 素 出 现 得 早 ， 
style 元 素 〈 及 其 包含 的 任何 导入 样式 表 ) 就 
会 覆盖 链接 的 样式 表 中 的 规则 。 

外 部 样式 表 也 可 以 包含 @import 规则 (不 
过 ， 上 文 提 到 ， 出 于 性 能 上 的 考虑 ， 不 推荐 
这 种 用 法 ) 。 在 这 种 情况 下 ， 导 入 的 规则 会 
被 外 部 样式 表 中 的 其 他 规则 覆盖 ( 因为 根据 




















定义 ， 这 些 规 则 必须 出 现在 @import 规则 的 后 
T) 。 它 们 与 文档 中 其 他 样式 表 的 关系 照例 
由 外 部 样式 表 链 接 的 位 置 决定 。 

关于 相互 冲突 的 样式 的 顺序 对 优先 级 的 影 
响 ， 有 一 种 例外 情况 ， 就 是 标记 !important 的 
样式 总 是 具有 最 高 的 优先 级 ， 无 论 它 出 现在 最 
前 、 最 后 ， 还 是 中 间 。 例 如 ，p ( margin-top: 
1em !important; }. 不 过 ,要 尽量 避免 这 种 用 法 。 
它 让 声明 变 得 太 强 ， 如 果 要 覆盖 这 样 的 样式 ， 
就 不 得 不 借助 于 更 长 的 规则 。 

唯一 一 处 值得 在 声明 中 使 用 !important 
的 地 方 是 用 户 样式 表 。 是 的 ， 网 站 的 访问 者 
可 以 为 其 浏览 器 创建 他 们 自己 的 样式 表 ， 且 
这 种 样式 的 优先 级 很 高 。 例 如 ， 访 问 者 可 能 
想 使 用 特定 大 小 的 字号 ， 或 调整 文本 颜色 与 
背景 颜色 之 间 的 对 比 度 。 不 过 ， 大 多 数 用 户 
并 不 知道 他 们 可 以 这 样 做 ， 因 此 这 种 情况 也 
是 很 不 常见 的 。 


8.6 使 用 与 媒体 相关 的 样式 表 


可 以 指定 一 个 只 用 于 特定 输出 的 样式 表 ， 
如 只 用 于 打印 ,或 只 用 于 用 浏览 如 在 屏幕 上 
查看 。 例 如 ， 可 以 创建 一 个 具有 打印 和 屏幕 
版 本 共有 特征 的 通用 样式 表 ， 再 创建 单独 的 



























































打印 样式 表 和 屏幕 样式 表 ， 分 别 包 含 只 用 于 8 











打印 的 属性 和 只 用 于 屏幕 显示 的 属性 。 


指定 与 媒体 相关 的 样式 表 的 步骤 

(1) 在 link 或 style 开 始 标记 中 添加 
media="output"， 基 中 output 可 以 是 print, 
screen 或 all (尽管 还 有 其 他 一 些 选 项 ， 但 这 
些 是 最 常见 的 ) ， 参 见 图 8.6.1。 多 个 值 之 间 
用 逗号 分 隔 。 

(2) 也 可 以 在 样式 表 中 使 用 emedia 规则 ， 
参见 图 8.6.2。 这 种 方法 不 需要 在 link 元 素 中 
指定 媒体 类 型 。 
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<head> 
«meta charset-"UTF-8" /» 
«title»El Palau de la Müsica«/title» 
«link rel="stylesheet" href-"base.css" 
—> media="screen" /> 
<link rel="stylesheet" href="print.css" 
> media-"print" /> 

</head> 

<body> 


<img src="img/palau250.jpg" width="250" 

— height="163" alt-"El Palau de la 

— Müsica" /» 

«img src-"img/tickets.jpg" width-"87" 

> height-"163" alt-"The Ticket Window" /» 


«/body» 











«/html» 
8.6.4 通过 对 link 元 素 添加 media 属性 ， 可 以 








将 样式 表 限 制 于 某 种 特定 的 输出 。 在 这 个 例子 中 ， 
使 用 浏览 器 查看 页 面 时 ，base.css 会 起 作用 ( 由 于 
使 用 了 media="screen" ) ; 打印 页 面 时 ,print.css 
会 起 作用 ( 由 于 使 用 了 media-"print" ) 















































media 属性 的 默认 值 是 all， 因 此 声明 
media="all" 是 多 余 的 。 换 和 句 话 说， 除非 需要 
让 样式 表 具 有 特殊 的 输出 ， 否 则 可 以 将 media 
属性 留 空 。 有 的 编码 人 员 倾 向 于 始终 显 式 地 
包含 media="all", 


有 9 种 可 能 的 输出 类 型 : all、aural、 
braille, handheld, print, projection, screen, 
tty 和 tv。 浏览 器 对 它们 的 支持 程度 各 不 相同 CX 
多 只 有 少量 的 支持 ) 。 实 际 上 ， 用 得 上 的 只 有 
screen fe print (或 许 还 应 加 上 all) ， 浏 览 器 
对 它们 的 支持 情况 都 很 好 。 另 一 方面 ( 可 以 这 
AL) ,设备 对 handheld 的 支持 程度 并 不 高 ， 
因此 在 为 移动 设备 设计 时 ， 通 常 使 用 screen 而 
不 是 handheld (参见 第 12 章 ) 。projection 类 
型 是 为 投影 仪 和 其 他 类 似 的 设备 准备 的 ，Opera 
的 投影 模式 Opera Show 支持 这 种 类 型 。 





Gcharset "UTF-8"; 


[* 针对 所 有 媒体 的 样式 */ 
img { 

border: 4px solid red; 
} 


p { 
color: green; 
font-style: italic; 
} 


/* 打印 样式 表 S 
Gmedia print ( 
img ( 
display: none; 


pt 


color: black; 








} 


图 8.6.2 样式 表 中 的 emedia 规则 是 指定 其 他 媒体 
类 型 的 另 一 种 方式 (参见 第 12 章 ) 。 在 这 个 例子 
中 ， 上 面 是 影响 所 有 媒体 类 型 ( 包括 打印 ) 的 样式 ， 
下 面 是 专门 用 于 打印 的 样式 。 在 页 面 的 打印 预览 
模式 将 看 到 ， 图 片 并 未 显示 (display: none 将 它 
们 隐藏 了 ) ， 段 落 文字 是 黑色 的 斜体 文字 。font- 
style: italic 声明 也 应 用 于 打印 模式 ， 因 为 打印 
样式 表 并 未 指定 其 他 的 font-style 






















































































CD 更 多 关于 创建 打印 样式 表 的 信息 ， 参 
见 Christian Krammer 的 文章 : www.smashing- 
magazine.com/2011/11/24/how-to-set-up-a-print- 
style-sheet/ 


8.7 ”提供 替代 的 样式 表 


可 以 链接 到 多 个 样式 表 ( 如 图 8.7.1 所 示 ), 
然后 让 访问 者 选择 他 们 最 喜欢 的 一 个 。 规 范 
允许 设置 一 组 基本 的 持久 性 样式 (persistent 
style) ， 如 图 8.7.2 所 示 ( 无 论 访问 者 的 首选 
项 是 什么 ， 都 会 应 用 它们 ) ; 规范 允许 设置 
一 组 默认 (或 称 首选 ) 样式 ， 如 图 8.7.3 所 
示 ， 如 果 访 问 者 没有 进行 选择 ， 就 会 应 用 它 
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们 ; 此 外 ， 规 范 还 允许 设置 一 个 或 多 个 替代 
(alternate ) 样式 表 ， 如 图 8.7.4 所 示 。 访 问 者 
可 以 选择 这 些 替 代 样 式 表 (参见 图 8.7.5 ) ， 

从 而 使 首选 样式 失效 ( 但 不 影响 持久 性 样式 )。 

蔡 代 样式 表 可 以 让 网 站 拥有 不 同 的 主题 。 








<head> 
«meta charset-"UTF-8" /> 
«title»Palau de la Müsica«/title» 
«link rel="stylesheet" 
 hrefz"base.css" /> 
«link rel-"stylesheet" href- 
— "preferred.css" title-"Dashed" /> 
«link rel-"alternate stylesheet" 
 hrefz"alternate.css" 
> titlez"Dotted" /> 

«/head» 











8.7.1. 按 顺 序 定义 了 基本 的 (或 称 持 和 久 性 的 ) 
样式 表 、 首 选 的 (或 称 自动 的 ) 样式 表 和 蔡 代 样式 
表 。 每 个 样式 表 都 需要 单独 的 Link 元 素 

















img ( 
border: 4px solid red; 
) 














E] 8.7.2. 这 个 CSS 文件 ( base.css ) 将 作为 持久 性 
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图 8.7.5 页 面 加 载 以 后 ， 图 像 有 虚线 边框 ( 首选 
样式 的 值 覆盖 了 基本 样式 的 实 线 值 ， 但 基本 样式 中 
的 颜色 被 保留 下 来 了 ) 。 如 果 用 户 选择 Dotted, 3E 
将 使 用 替代 样式 表 ( 男 见 彩 插 ) 



































提供 替代 样式 表 的 步骤 

(1) 要 指定 基本 样式 表 (不 论 访问 者 的 首 
选项 是 什么 ) ， 就 使 用 8.2 节 中 描述 的 简单 语 
法 ,不 带 title 属性 。 

Q) 要 指定 可 以 被 其 他 样式 表 替 代 的 首选 样 
式 表 ， 就 在 link 元 素 中 添加 titles" Iabel", 其 
中 Jabel 是 标识 首选 样式 表 的 名 称 。 

(3) 要 指定 替代 样式 表 ， 就 在 link 元 素 中 使 


























样式 表 的 例子 ， 无 论 访问 者 做 什么 ， 都 会 应 用 它 

















img ( 
border-style: dashed; 
} 


8.7.3” 当 访问 者 转 入 这 个 页 面 时 ， 在 加 载 完 
base.css 后 将 默认 加 载 这 个 样式 表 (C preferred.css ) 





























img { 


border-style: dotted; 
} 


图 8.7.4 如 果 访 问 者 愿意 ， 它 们 可 以 加 载 这 个 样 
式 表 。 文 件 名 为 alternate.css， 尽 管 这 是 一 种 通行 
做 法 ， 但 是 也 可 以 为 它 起 你 喜欢 的 名 称 














FH rel-"alternate stylesheet" title-"Jabel", 
其 中 abel 是 标识 替代 样式 表 的 名 称 。 


(NES 不 必 为 了 提供 替代 样式 表 而 提供 首 
选 样式 表 。 这 个 例子 也 可 以 只 有 指向 base.css 
和 alternate.css 的 link 元 素 。 类 似 地 ， 也 可 以 
不 指定 持久 性 样式 表 ， 只 指向 preferred.css 和 
alternate.css。 也 可 以 有 一 个 以 上 的 替代 样式 表 。 





Firefox ( 参见 图 8.7.5) 和 Opera 提供 
了 在 样式 表 之 间 进 行 切换 的 简单 方法 。 对 于 
其 他 浏览 器 ， 就 只 能 使 用 JavaScript 解决 方案 
1. 可 以 在 网 上 搜索 “style sheet switcher” ( 样 
式 表 切 换 器 ) ， 寻 找 可 供 使 用 的 代码 。 
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CHES 几 年 以 前 ， 替 代 样 式 表 是 让 用 户 选择 字 
号 的 一 种 方法 。 现 在 ， 不 借助 替代 样式 表 在 浏览 
器 中 增 大 字号 已 经 变 得 相对 容易 ， 而 且 有 越 来 越 


多 的 用 户 意识 到 了 这 类 功能 (主要 为 页 面 缩放 ) 。 


还 可 以 加 载 用 以 打印 网 页 的 样式 表 。 


详细 信息 参见 8.6 5 


8.8 ”借鉴 他 人 灵感 : CSS 


在 第 2 前 中 ,你 党 到 了 如 何 查 看 网 页 的 
源 代码 。 查 看 其 他 人 的 CSS 也 不 太 困 难 。 


查看 其 他 设计 人 员 的 CSS 代码 
(1) 首先 查看 页 面 的 HTML 代码 C 如 图 


8.8.1 所 示 ) 。 关 于 查看 HTML 源 代码 的 更 多 
言 息 ， 参 见 2.8 节 。 

如 果 CSS 代码 是 般 入 样式 表 ， 就 已 经 能 
看 到 它们 了 。 

(2) 如 果 CSS 是 外 部 样式 表 ， 就 在 HTML 
中 找到 对 它 的 引用 ， 再 点 击 其 文件 名 ( 参见 
图 8.8.1 )。 样 式 表 就 显示 在 浏览 需 窗 口中 了 ( 如 
图 8.8.2 所 示 )。 如果 愿 意 , 可 以 复制 这 些 代码 ， 
再 粘贴 到 文本 编辑 器 中 。 



























< DOCTYPE html- 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<title>El Palau de la Música</title> 


<link rel="stylesheet" href="þasę, css" /> 
</head> 1 


<body> 
<article> 
<h1>El Palau de la Müsicac/h1» 


<img src-"img/palauz50.jpg" vidth-"250" 
height-"163" alt-"El Palau de la Música" /> 

<img src-"img/tickets.jpg" width-"857" 
height-"163" alt-"The Ticket Window" f> 


<p>I love the «span lang-"es"»Palau de la 
Müsicac/span-. It is ornate and gaudy and everything zl 


PA 


8.8.1 查看 包含 你 感 兴趣 的 样式 表 的 HTML 页 
面 源 代码 ， 再 点 击 样式 表 的 文件 名 
















Bcharset "UTF-8"; 
/* À simple style sheet */ 


img ( 
border: 4px solid red; 





} 





图 8.8.2 样式 表 显 示 在 浏览 器 窗口 中 





同 HTML 一 样 ， 可 以 从 其 他 设计 人 
员 的 代码 中 借鉴 灵感 ， 然 后 编写 自己 的 样式 
表 。 不 过 ， 查 看 其 他 人 的 代码 时 也 要 留心 。 
这 些 代码 放 在 万 维 网 上 并 不 意味 着 它们 就 是 
编写 某 一 效果 的 代码 的 最 佳 方式 (尽管 其 作 
者 希望 如 此 ) 。 


现代 浏览 器 允许 像 图 中 显示 的 那样 
直接 在 HTML 代码 中 点 击 样式 表 的 名 称 。 要 
在 旧 的 浏览 器 中 查看 样式 表 ， 可 能 需要 复制 
link 元 素 中 显示 的 URL， 再 粘贴 到 浏览 器 的 
地 址 栏 (替换 HTML 文件 名 ) , 然后 按 回 车 键 。 
如 果 样 式 表 的 URL 是 相对 地 址 ( 参见 1.7 节 )， 
就 需要 将 网 页 的 URL 和 样式 表 的 相对 URL 
结合 在 一 起 ， 形 成 样式 表 的 完整 URL。 


ED 使 用 现代 浏览 器 提供 的 开发 者 工具 ， 
可 以 快速 查看 页 面 的 CSS。 大 多 数 浏览 器 都 
捆绑 了 这 类 工具 。Firefox 中 有 一 个 实现 此 功 
能 的 扩展 ， 名 为 Firebug (参见 第 20 章 ) 。 








本 章 内 容 
口 构造 选择 带 
O 按 名 称 选择 元 素 


口 按 类 或 ID 选择 元 素 
口 按 上 下 文选 择 元 素 

O 选择 元 素 的 一 部 分 

口 按 状态 选择 链接 元 素 
口 按 属 性 选择 元 素 

口 指定 元 素 组 

口 组 合 使 用 选择 带 

口 选择 需 回 顾 











正如 7.1 节 中 看 到 的 ，CSS 样式 规则 有 两 
个 主要 部 分 。 选 择 器 决定 格式 化 将 应 用 于 哪 
些 元 素 ， 而 声明 则 定义 要 应 用 的 样式 化 。 在 
本 章 中 ， 你 将 学 习 如 何 定义 CSS 选择 器 。 

最 简单 的 选择 器 可 以 对 给 定 类 型 的 所 有 
元 素 (如 所 有 的 hd 标题 ) 进行 样式 化 ， 更 复 
杂 的 选择 峰 可 以 根据 元 素 的 类 或 ID、 上 下 文 、 
状态 等 来 应 用 格式 化 规则 。 

在 定义 了 选择 器 以 后 ,可 以 根据 第 10 章 ~ 
第 14 章 的 讲解 创建 声明 (包括 实际 的 属性 和 
值 )。 本 书 的 其 余部 分 会 讨论 一 些 比 较 特殊 
的 样式 属性 。 在 此 之 前 ， 我 们 将 在 例子 中 使 
用 非常 简单 昌 意 义 明 确 的 (color: red;}。 

















9.1 构造 选择 器 


选择 器 决定 样式 规则 应 用 于 哪些 元 素 。 
例如 ， 如 果 要 对 所 有 的 p 元素 添加 Times 字 
体 、12 像素 高 的 格式 ， 就 需要 创建 一 个 只 识 
别 p 元 素 而 不 影响 代码 中 其 他 元 素 的 选择 器 。 
如 果 要 对 每 个 区 域 中 的 第 一 个 p 设置 特殊 的 
缩 进 格式 ， 就 需要 创建 一 个 稍微 复杂 一 些 的 
选择 器 ， 它 只 识别 作为 页 面 中 每 个 区 域 的 第 
一 个 元 素 的 p 元 素 。 

选择 器 可 以 定义 五 个 不 同 的 标准 来 选择 
要 进行 格式 化 的 元 素 。 
O 元 素 的 类 型 或 名 称 ， 如 图 9.1.1 所 示 。 
O 元 素 所 在 的 上 下 文 ， 如 图 9.1.2 所 示 。 
O 元 素 的 类 或 DD， 如 图 9.1.3 和 图 9.1.4 
所 示 。 
口 元 素 的 伪 类 或 伪 元 素 , 如 图 9.1.5 所 示 
(放心 ,我 将 在 后 面 解释 伪 类 和 伪 元 素 )。 
口 元 素 是 否 有 某 些 属性 和 值 ， 如 图 9.1.6 
所 示 。 

为 了 指出 目标 元 素 ， 选 择 咒 可 以 使 用 这 五 
个 标准 的 任意 组 合 。 在 大 多 数 情况 下 ， 只 使 用 
一 个 或 两 个 标准 即 可 。 另 外 ， 如 果 要 对 几 组 不 
同 的 元 素 应 用 相同 的 样式 规则 ， 可 以 将 相同 的 
声明 同时 应 用 于 几 个 选择 器 (参见 9.8 节 ) 。 






























































本 章 其 余部 分 将 详细 解释 如 何 定义 选 
FET o 
要 选择 的 元 素 的 名 称 
Hn 
h1 { 
color: red; 
} 
图 9.1.1 最 简单 的 选择 器 类 型 就 是 要 格式 化 的 元 
素 的 类 型 的 名 称 ( 在 这 个 例子 中 为 hl ) 
EF 
要 选择 的 元 素 的 名 称 
Íh h 
hi em { 
color: red; 
} 
图 9.1.2 ”这 个 选择 需 使 用 上 下 文 。 这 个 样式 只 应 

















用 于 nd 元 素 中 的 em 元 素 。 其 他 地 方 的 em 元 素 不 受 
影响 

















" 
a 
.very { 


color: red; 


ID 
m 
#gaudi { 


color: red; 


} 











要 选择 的 元 素 的 名 称 
x 
a 
em.very { 


color: red; 


要 选择 的 元 素 的 名 称 


ID 
n 
article#gaudi { 


color: red; 


} 























图 9.1.4 通过 在 class 或 id 选择 器 前 面 添加 目标 
元 素 的 名 称 ， 可 以 增强 选择 器 的 特殊 性 。 在 这 个 例 
子 中 ， 第 一 个 选择 器 仅 选 择 属于 very 类 的 em 元 素 ， 
而 不 是 属于 very 类 的 任何 元 素 。 类 似 地 ， 第 二 个 
选择 需 仅 选择 id X gaudi 的 article 元 素 。 除 非 






























































确 有 必要 ， 一 般 不 要 使 用 这 种 方法 。 图 9.1.3 的 示 
例 中 的 特殊 性 弱 一 些 的 选择 器 是 更 好 的 方法 

名 称 

| 伪 类 

rie 
a:link ( 
color: red; 

】 

图 9.1.5 在 这 个 例子 中 ， 选 择 器 选择 属于 link fJ 











类 的 a 元素 ( 即 还 没有 访问 过 的 a 元 素 ) 








图 9.1.3 第 一 个 选择 器 选择 所 有 属于 very 类 
的 元 素 。 换 句 话说 ， DENA E 始 标 记 中 包 
含 class="very" 的 元 素 。 第 二 个 选择 器 选择 id 
为 gaudi 的 那个 元 素 ， 也 就 是 在 开始 标记 中 指定 
id-"gaudi" 的 元 素 。 回 忆 一 下 ,一 个 id 在 每 个 页 
看 中 只 能 出 现 一 次 ， 而 一 个 class 可 以 出 现任 意 







































































名 称 
l 属性 
a[name] { 
color: red; 
} 
图 9.1.6 可 以 在 选择 器 中 使 用 方 括号 添加 关于 目 





























标 元 素 的 属性 或 值 的 信息 
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9.2 ” 按 名 称 选择 元 素 


选择 要 格式 化 的 元 素 ， 最 常用 的 标准 
能 是 元 素 的 名 称 或 类 型 。 例 如 ， 可 能 要 让 所 
有 的 hi 元 素 以 大 字号 、 粗 体 显示 ， 让 所 有 的 
p 元 素 以 无 衬 线 字体 显示 ( 如 图 9.2.1 所 示 ) o 








<!DOCTYPE html» 
«html lang="en"> 
«head» 


«/head» 
«body» 


«article class-"about"» 
«h1»Antoni Gaudí«/h1» 


«p»Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.«/p» 
«p»Barcelona «a href-"http://www.gaudi2002.bcn.es/english/" rel-"external'»celebrated the 150th 
— anniversary«/a» of Gaudí's birth in 2002.«/p» 


«section class-"project"» 
«h2 lang-"es"»La Casa Milà«/h2» 
«p»Gaudí's work was essentially useful. «span lang-'es"»La Casa Milà«/span» is an apartment 
— building and «em»real people«/em» live there.«/p» 

«/section» 


«section class-"project"» 
«h2 lang-"es"»La Sagrada Familia«/h2» 
<p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is 
— the «em»most visited«/em» building in Barcelona.«/p» 
«/section» 
«/article» 


























9.2.1 这 段 HTML 代码 包含 两 个 hz 252€. (或 许 你 对 lang 属性 感到 疑惑 。 它 指明 内 容 使 用 的 是 页 
而 默认 语言 以 外 的 另 一 种 语言 。 页 面 默 认 语言 是 在 每 页 开头 处 紧 跟 在 DOCTYPE 后 面 的 html 元 素 中 指 
定 的 。 在 这 个 例子 中 ， 每 个 hz 上 的 lang="es" 表示 其 内 容 为 西班牙 语 。 ) 
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按照 类 型 选择 要 格式 化 的 元 素 的 方法 

输入 selector, HP selector 是 目标 元 
素 的 类 型 名 称 ( 不 含 任何 属性 ) ， 如 图 9.2.2 
Btz s 





























并 非 所 有 的 选择 器 都 需要 指定 元 素 
的 名 称 。 如 果 要 一 类 元 素 进行 格式 化 ， 而 不 
管 属于 这 个 类 的 元 素 的 类 型 ， 就 可 以 从 选择 
器 中 去 掉 元 素 名 称 。 下 一 节 将 解释 具体 怎 
么 做 。 





h2 ( 
color: red; 
j 
9.22 ”这 个 选择 器 会 选择 文档 中 所 有 的 h2 元 





素 ， 并 让 它们 显示 为 红色 ， 人 参见 图 9.2.3 





除非 指 
部 分 介绍 的 技术 ) ， 
将 被 格式 化 ， 无 论 
位 置 。 


定 其 他 情况 (使 用 本 章 其 余 
指定 类 型 的 所 有 元 素 都 
耸 它 们 出 现在 文档 的 什么 





Antoni Gaudí - introduction - Mozilla Firele 


File Edt View History Bookmarks Tools Help 


ll —  :-， 





| |. | Antoni Gaudi - Introduction 





Antoni Gaudí 


Many tourists are drawn to Barcelona to see Antoni 
Gaudi's incredible architecture. 


Barcelona celebrated the 150th anniversary of Gaudi's 
birth in 2002. 


La Casa Milà 


Gaudis work was essentially useful. La Casa Milà 1s an 
apartment building and real people live there. 


La Sagrada Familia 


The complicatedly named and curiously unfinished 
Expiatory Temple of the Sacred Family is the nost visited 
building in Barcelona. 








9.2.8 所 有 的 h2 元素 都 显示 为 红色 ( 男 见 彩 插 ) 





网 ”通配符 * (E) 匹配 代码 中 的 任何 元 
素 名 称 。 例 如 ， 使 用 * ( border: 2px solid 
green; } 会 让 每 个 元 素 都 有 一 个 2 像素 宽 、 
绿色 的 实 线 边框 ! 


可 以 在 一 个 先 
名 称 ， 名 称 之 间 用 逗号 分 隔 。 
9.8 节 。 


择 器 中 使 用 一 组 元 素 
更 多 细节 参见 


9.3” 按 类 或 ID 选择 元 素 


如 果 已 经 在 元 素 中 标识 了 class (参见 图 
93.1) 或 id (参见 第 3 章 ) ， 就 可 以 在 选择 器 中 
使 用 这 个 标准 ， 从 而 只 对 被 标识 的 元 素 进 行 格式 
化 (参见 图 932 ) 。 代 码 的 生成 结果 如 网 93.3 
所 示 。 


í; Paa a UE 

() 输 入 .〈 点 号 ) 。 

(2) 不 加 空 a 直接 输入 classname, iX 
里 的 classname 标识 希望 应 用 样式 的 类 。 


2. 按 id 选择 要 格式 化 的 元 素 

(1) 输 入 #( 井 号 )。 

Q) 不 加 空格 ， 直 接 输 入 id, 
唯一 标识 希望 应 用 样式 的 元 素 。 














KEH id 
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«article id-"gaudi" class-"about"» 
«hi»Antoni Gaudíc/hi» 


— anniversary«/a» of Gaudí's birth in 2002.«/p» 
«section class-"project"» 
«h2 lang-'es"»La Casa Milà«/h2» 
«section» 
«article» 
 applied.«/p» 


«article class-"about"» 
«hi»Lluís Domènech i Montaner«/h1» 


«/article» 





<p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.«/p» 
«p»Barcelona «a href-"http://www.gaudi2002.bcn.es/english/" rel-"external'»celebrated the 150th 


«p»Gaudí's work was essentially useful. «span lang-'es"»La Casa Milà«/span» is an apartment 


— building and «em»real people«/em» live there.«/p» 


«p»This paragraph doesn't have «code»class-"about"«/code», so it isn't red when the CSS is 


<p>Lluis Domènech i Montaner was a contemporary of Gaudí.«/p» 











9.3.1 有 两 个 class Jj about 的 article 元 素 。 它 们 之 间 还 有 一 个 不 含 class 的 短 段落 
.about { FD 注意 ， 在 图 9.3.1 和 图 9.3.2 中 使 用 了 
color: red; 表达 内 容 含义 的 class £ 4k (about) ， 而 不 











9.3.2 ”这 个 选择 器 会 选择 class 为 about 的 元 
素 。 在 这 个 例子 中 , 它们 都 是 article 元 素 , 不 过 ， 
可 以 将 类 应 用 于 任何 元 素 。 如 果 只 想 对 有 这 个 类 
的 article 元 素 应 用 这 种 样式 ， 可 以 将 选择 器 写 为 
article.about。 不 过 ， 这 样 做 通常 会 使 特殊 性 高 
于 你 所 需要 的 程度 
































Alm 





可 以 单独 使 用 class 和 id， 也 可 以 同 
其 他 选择 器 标准 混在 一 起 使 用 。 例 如 ，.news ( 
color: red; ) 会 影响 所 有 属于 news 类 的 元 素 ， 
而 hi.news { color: red; ) 只 会 影响 属于 news 
类 的 hl 元素。 除非 必须 特别 针对 目标 元 素 ， 最 
好 不 要 在 id 或 class 选择 器 中 添加 元 素 名 称 。 


是 命名 为 red。 最 好 避免 创建 描述 事物 如 何 显 
示 的 class 名 称 ， 因 为 你 可 能 在 将 来 改变 样式 
(例如 ， 在 本 节 示 例 中 让 文本 显示 为 绿色 ) 。 
同 元 素 一 样 , 类 也 会 增加 HTML 的 语义 价值 。 


如 果 图 9.3.2 P 5 85 X #gaudi ( color: 
red; }， 就 只 有 第 一 个 article 的 文本 会 显示 为 
红色 ， 因 为 它 是 唯一 包含 id="gaudi" 的 元 素 。 每 
个 id 都 必须 是 唯一 的 ， 因 此 ， 不 能 在 关于 Lluís 
Domènech i Montaner 的 article 上 再 用 这 个 id, 


ER 关于 在 HTML 代码 中 为 元 素 指定 类 
的 信息 ， 参 见 3.15 节 。 








Barcelona's Architects - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 








| E Barcelona's Architects 


+ X 





Antoni Gaudí 


Many tourists are drawn to Barcelona to see Antoni 
Gaudi's incredible architecture 


Barcelona celebrated the 150th anniversary of Gaudi's birth 
in 2002. 





La Casa MIila 


Gaudi's work was essentially useful. La Casa Milà is an 
apartment building and real people live there 


La Sagrada Família 
The complicatedly named and curiously unfinished 


Expiatory Temple of the Sacred Family is the most visited 
building in Barcelona 


This paragraph doesn't have c1ass-"about", so it isn't 
red when the CSS is applied. 


Lluís Domènech i Montaner 


Lluís Domènech i Montaner was a contemporary of Gaudi. 





属于 about 类 的 article 显示 为 红色 ， 
而 页 面 末尾 的 p 元 素 没有 显示 为 红色 (或许 你 对 链 
接 显示 为 蓝 色 感到 疑惑 。 链 接 显示 为 蓝 色 是 浏览 器 


9.3.3 











的 默认 样式 ， 可 以 编写 自己 的 样式 覆盖 它 。) C8 
见 彩 插 ) 








类 选择 器 与 ID 选择 器 的 比较 

要 在 class 选择 器 和 id 选择 器 之 间作 
出 选择 的 时 候 ， 建 议 尽 可 能 地 使 用 class 
选择 器 。 这 主要 是 因为 class 选择 器 是 可 
再 用 的 。 有 人 提议 完全 不 使 用 id 选择 器 ， 
这 可 以 理解 ， 但 最 终 的 决定 权 掌 握 在 网 站 
开发 人 员 手 中 。 这 是 一 个 有 争议 的 主题 ， 
双方 都 有 一 些 说 服 力 很 强 的 观点 。 在 任何 
情况 下 , id 选择 器 都 会 引入 下 面 两 个 问题 。 


口 与 它们 关联 的 样式 不 能 在 其 他 元 素 
ERS E, SR E o = 
Mid RE HB UE — COE E) V dX 
会 导致 在 其 他 元 素 上 重复 样式 ， 而 
不 是 通过 class 共享 样式 。 

O 它们 的 特殊 性 比 class 选择 器 要 强 
得 多 。 这 意味 着 如 果 要 和 窗 盖 使 用 id 
选择 器 定义 的 样式 ， 就 要 编写 特殊 
性 更 强 的 CSS 规 则 。 如 果 数 量 不 多 ， 
可 能 还 不 难 管 理 。 如 果 你 是 在 处 理 
一 个 规模 较 大 的 网 站 ， 你 的 CSS 就 
会 变 得 比 实际 所 需 的 更 长 、 更 复杂 。 

随 着 你 越 来 越 多 地 处 理 CSS， 你 对 这 

两 点 的 理解 也 会 更 加 清晰 。 ( 另 一 方面 ， 
有 人 喜欢 使 用 id 选择 器 的 原因 之 一 就 是 使 
用 它们 一 眼 就 能 看 出 元 素 是 唯一 的 。 ) 

因此 ， 推 荐 的 做 法 是 寻找 能 将 共享 样 

式 结 合 进 一 个 或 多 个 class 的 机 会 ， 从 而 
可 以 对 它们 进行 复 用 ， 同时， 如 果 确 实 要 
使 用 id 选择 器 ， 其 数量 也 应 维持 在 最 小 值 
(参见 第 11 章 的 示例 页 面 ) 。 这 样 ， 样 式 
表 会 变 得 更 短 ， 更 易于 管理 。 


9.4 按 上 下 文选 择 元 素 


在 CSS 中 ， 可 以 根据 元 素 的 祖先 、 父 元 
素 或 同胞 元 素来 定位 它们 (参见 1.3 节 中 的 
“ 父 元 素 和 子 元素 ”) ， 如 图 9.4.1 ~ 图 9.4.4 
所 示 。 

祖先 (ancestor ) 是 包含 目标 元 素 〈 后 代 ， 
descendant ) 的 任何 元 素 ， 不 管 它们 之 间隔 了 
多 少 代 。 


1. 按 祖先 元 素 选择 要 格式 化 的 元 素 
(1) 输入 ancestor， 这 里 的 ancestor 是 希 


望 格式 化 的 元 素 的 祖 允 元素 的 选择 需 。 
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(2) 输入 一 个 空格 。 

(3) 如 果 需 要 ， 对 后 续 的 每 个 祖先 元 素 重 
复 第 (1) 步 和 第 (2) 步 。 

(4) 输入 descendant， 这 里 的 descendant 
是 希望 格式 化 的 元 素 的 选择 需 。 





«article class-"about"» 
«hi»Antoni Gaudí«/h1» 


«p»Many tourists ... «/p» 
«p»Barcelona ... «/p» 


«section class-"project"» 
«h2 lang-'es"»La Casa Milà«/h2» 
«p»Gaudí's work ... </p> 


«/section» 


«section class-"project"» 


nc 


«h2 lang-'es"»La Sagrada Família«/h2» 


«/section» 











«article» 
E941 为 了 让 元 素 之 间 的 关系 更 为 明显 ， 我 对 


文本 做 了 删节 。 每 一 级 缩 进 代表 一 代 。 注 意 ， 在 
这 段 代 码 中 ， 有 两 个 直接 包含 在 article 里 的 
T about 类 的 第 二 代 p 元素 ， 一 个 直接 包含 在 属 
于 project 类 的 section ( 包含 在 article 里 ) 的 第 
三 代 p 元素 。 此 外 ， 还 有 一 个 第 三 代 p 元素 ， 但 
没有 显示 出 来 。h2 也 都 是 第 三 代 。 代 码 实现 参见 
图 9.4.6 











调 

















E: 






































article.about p ( 
color: red; 


} 











9.4.2 article.about 和 p 之 间 的 空格 意味 着 
这 个 选择 器 会 寻找 任何 作为 about 类 的 article 的 
后 代 的 p 元 素 ， 不 管 它 是 第 几 代 元 素 。 不 过 , 在 
class 前 面 添加 元 素 名 称 通常 会 带 来 更 高 的 特殊 性 ， 
而 在 实践 中 往往 并 不 需要 这 么 高 的 特殊 性 (对 id 
来 说 更 是 如 此 ) 。 关 于 特殊 性 较 低 的 选择 器 ， 参 见 
图 9.4.3 





























/* 得 到 相同 效果 的 其 他 方式 


/* 任意 article 后 代 的 所 有 p， 
o 特殊 性 最 低 的 方法 */ 
article p ( 

color: red; 


/* 任意 about 类 元 素 后 代 的 所 有 p， 
一 特殊 性 第 二 低 的 方法 */ 
.about p ( 

color: red; 
} 














9.4.8 构造 选择 器 以 达到 预期 效果 通常 有 一 种 
以 上 的 方法 。 关 键 在 于 你 需要 多 大 的 特殊 性 。 这 
里 第 一 个 例子 中 的 选择 器 (article p ( }) 的 特 
殊 性 比 它 后 面 的 选择 器 (about p ( )) 和 图 9.4.2 
中 选择 器 的 特殊 性 都 低 。 这 里 第 二 个 例子 结合 了 
class 选择 髓 和 后 代 选 择 器 ( 也 可 以 与 id 选择 需 结 
A) 。 你 将 发 现 一 直 使 用 的 是 这 些 选择 器 ， 而 不 是 
图 9.4.2 中 更 特殊 和 宛 长 的 模式 
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Antoni Gaudí 


Many tourists are drawn to Barcelona to see Antoni 
Gaudi's incredible architecture. 


Barcelona celebrated the 150th anniversary of Gaudi's birth 
in 2002 





La Casa MIila 


Gaudi's work was essentially useful. La Casa Milà is an 
apartment building and rea? people live there 


La Sagrada Família 


The complicatedly named and curiously unfinished 
Expiatory Temple ofthe Sacred Family is the most visited 
building in Barcelona 





9.4.5 所 有 包含 在 属于 about 类 的 元 素 里 的 p 
元 素 都 是 红色 的 ， 即 使 它们 同时 也 包含 于 其 他 属于 
about 类 的 元 素 。 图 9.4.2 和 图 9.4.3 中 每 条 样式 规 
则 的 结果 都 显示 在 这 里 〈 另 见 彩 搬 ) 
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基于 元 素 祖先 的 选择 器 称 为 后 代 选 择 
器 。CSS3 将 其 重 命名 为 后 代 结 合 符 (有 的 人 


仍 称 其 为 “选择 器 ”) 。 


不 要 对 图 9.4.2 中 的 article.about 
部 分 感到 疑惑 。 记 住 这 只 表示 “class 等 于 
about 的 article" , 因 此 article.about p 
表示 “包含 在 class 等 于 about 的 article 
元 素 里 的 任何 p 元 素 ”。 相 比 之 下 ， 特 殊 性 
低 一 些 的 .about p 表示“ 包含 在 class 等 于 
about 的 任意 元 素 里 的 所 有 p 元 素 ”， 参 见 图 
9.4.3。 这 是 因为 在 上 下 文中 id 选择 器 的 特殊 
性 比 元 素 和 类 选择 器 的 更 高 。 





上 面 的 例子 展示 了 后 代 结 合 符 。CSS 也 
有 子 结合 符 ， 从 而 可 以 为 父 元 素 的 直接 后 代 
( 即 子 元 素 ) 定义 样式 规则 。 在 CSS3 之 前 ， 
它们 称 做 子 选 择 器 。 父 元 素 是 直接 包含 另 一 
元 素 ( 子 元 素 ) 的 元 素 ， 也 即 它们 之 间 没 有 
隔 着 任何 层次 。 


2. 按 父 元 素 选 择 要 格式 化 的 元 素 

(1) 输入 parent, XX HA) parent 是 直接 
包含 待 格式 化 元 素 的 元 素 的 选择 器。 

DWA > (大 于 号 ) ， 参见 图 9.4.5。 

(3) 如 果 需 要 ， 对 后 续 每 代 父 元 素 重 复 第 
(1) 步 和 第 (2) 步 。 

(4) 输入 child, iX Œ RS child 是 要 格式 
1L RITU SR UE P o 














article.about > p { 
color: red; 
) 


9.4.5 ”这 个 选择 器 仅 选 择 作 为 about 类 article 
元 素 的 子 元 素 (而 非 子 于 元 素 、 了 于 于 于 元 素 等 ) 

的 p 元 素 。 包 含 于 任何 其 他 元 素 的 p 元 素 均 不 会 被 
选中 ， 实 现 参 见 图 9.4.6 
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La Sagrada Família 
The complicatedly named and curiously unfinished 


Expiatory Temple ofthe Sacred Family is the most visited 
building in Barcelona. 





9.4.6 ”只 有 头 两 个 p 7628 Æ about 类 article 的 
子 元 素 。 男 两 个 p 元 素 是 article 里 section 元 素 的 
子 元 素 。 这 个 例子 使 用 的 HTML 代码 见 图 94.1 ( 另 
Wi ) 





EED 正如 你 在 后 代 结 合 符 中 看 到 的 ， 可 以 
忽略 class 前 面 的 元 素 名 称 。 事 实 上 ， 这 也 是 
推荐 的 做 法 ( 除非 为 实现 目标 样式 需要 额外 的 
特殊 性 ) 。 例 如 ， 使 用 .about > p ( color: 
red; } 会 产生 同样 的 效果 。 也 可 以 完全 不 用 
class, Je article > p { color: red; }， 产 生 
更 低 的 特殊 性 。 在 考虑 特殊 性 更 高 的 选择 器 之 
前 ， 应 当 尽 可 能 地 使 用 这 些 更 为 简单 的 形式 。 
本 章 剩余 部 分 的 一 些 例子 也 可 以 按 类 似 的 方式 
进行 简化 。 你 已 经 了 解 了 如 何 进行 简化 ， 因 此 
不 必 再 一 一 列举 这 些 替 代 方 案 ， 但 应 记 住 ， 通 
常 最 好 保持 较 低 的 特殊 性 , 让 样式 更 易于 复 用 。 


GNES 也 可 以 在 子 结合 符 中 使 用 id 选择 器 ， 
但 推荐 尽量 使 用 特殊 性 更 低 的 选择 器 (如 元 
素 类 型 、class 等) 。 


SIE Internet Explorer 6 不 支持 子 选 择 器 。 
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有 时 ， 只 选择 元 素 的 第 一 个 子 元 素 (而 
不 是 所 有 的 子 元 素 ) 是 很 有 用 的 。 要 实现 这 
种 效果 ， 可 以 使 用 :first-child H% (参见 
9.4.7 ~ 图 9.4.10)。 








Fi 





/* 你 可 能 认为 这 会 让 第 一 个 段落 变 成 红色 ， 
SARRERA! #/ 


.about > p:first-child { 
color: red; 
} 











94.7 :first-child 伪 类 仅 选 择 某 元 素 的 第 一 个 
子 元 素 ， 而 不 是 作为 子 元 素 的 元 素 的 第 一 个 实例 。 
因此 ， 也 许 你 倾向 于 认为 下 面 的 规则 会 让 示例 页 面 
中 的 第 一 个 段落 显示 为 红色 , 但 实际 上 不 是 这 样 ( 参 
见 图 9.4.8 ) ， 因 为 hi 才 是 about 类 article 的 第 一 
个 子 元 素 。 这 个 例子 使 用 的 HTML 代码 见 图 9.4.1 
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Gaudis incredible architecture 
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Gaudi's work was essentially useful. La Casa Milà is 





9.4.8 这 条 规则 对 页 面 没有 任何 影响 ， 因 为 没 
有 一 个 p 元 素 是 about 类 元 素 的 子 元 素 
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Æ 9.4.10 包含 在 article 里 的 hi 显示 为 红色 ， 因 为 
它 是 某 个 about 类 元 素 的 第 一 个 子 元 素 。 如 果 article 
里 还 有 其 他 hi 元素 ， 这些 元 素 将 不 会 显示 为 红色 ( 另 
见 彩 插 ) 




















3. 选择 某 元 素 的 第 一 个 子 元 素 进行 格式 化 

(1) 这 一 步 可 选 ， 输入 parent， 这 里 的 
parent 是 目标 元 素 的 父 元 素 的 选择 器 。 

(2) 如 果 在 第 (1) 步 中 包含 了 parent， 就 
再 依次 输入 一 个 空格 、> 和 男 一 个 空格 。 

(3) 可 选 ， 输 入 表示 要 格式 化 的 第 一 个 子 
元 素 的 选择 器 (如 p 或 .news ) o 

(4) 输入 :first-child (参见 图 9.4.9 ) 。 

( 注意 ， 第 (D) 步 中 指定 parent 并 不 是 必需 
的 。 例 如 ,使 用 p:first-child { font- 
weight: bold; ) 会 为 每 一 个 作为 某 元 素 第 
一 个 子 元 素 的 段落 添加 粗 体 样式 。 ) 

下 面 继续 讲 我 们 的 “家 族 ” 主 题 。 同 胞 
AK (sibling) 是 拥有 同一 父 元 素 的 任何 类 型 
的 子 元 素 。 相 邻 同 胞 元 素 (adjacent sibling ) 
是 直接 相互 毗邻 的 元 素 ， 即 它们 之 间 没 有 其 














/* hi 是 第 一 个 子 元 素 ， 因 此 是 有 效 的 */ 


.about > ha:first-child { 











color: red; 
} 
9.4.9 ”这 个 选择 带 仅 选择 作为 在 HTML 中 带 有 

















class="about" 的 元 素 的 第 一 个 子 元 素 的 hl1。 这 条 
规则 会 影响 页 面 的 显示 ， 参 见 图 9.4.10 


他 的 同胞 元 素 。 在 下 面 这 个 简略 的 例子 中 ， 

hi 和 p 是 相 邻 同胞 元 素 , p 和 h2 是 相 邻 同胞 
元 素 , 而 hi 和 h2 则 不 是 相 邻 同胞 元 素 。 不 过 ， 
它们 都 是 同胞 元 素 ( 也 是 body 元 素 的 子 元 素 )。 








<body> 








152 $93 定义 选择 器 
«h1».. .«/h1» 
«p»...«/p» 
«h2».. .«/h2» 
«/body» 
</html> 


CSS 相 邻 同胞 结合 符 ( adjacent sibling com- 
binator ) 可 以 选择 直接 跟 在 指定 的 同胞 元 素 后 
面 的 同胞 元 素 。 (关于 CSS3 中 新 出 现 的 普通 
同胞 结合 符 ( general sibling combinator ) , & 
见 最 后 一 条 提示 。 ) 


4. 按 相 邻 同胞 元 素 选 择 要 格式 化 的 元 素 

(1) 输入 sibling, iX HW] sibling 是 包含 
在 同一 父 元 素 中 的 、 直 接 出 现在 目标 元 素 前 
面 的 元 素 的 选择 器 。 ( 它们 不 必 是 同一 种 元 
素 类 型 ， 只 要 它们 彼此 直接 相 邻 就 行 。 ) 

CO) 输入 +( 加 号 ) 。 

(3) 如 有 需要 ， 对 每 个 后 续 的 同胞 元 素 重 
复 第 (1) 步 和 第 (2) 步 。 

(4) 输入 element, xXx iW element 是 要 格 
式 化 的 元 素 的 选择 器 ， 参 见 网 9.4.11. 

















.about pep { 
color: red; 
} 


图 9.4.11 这 个 相 邻 同胞 结合 符 仅 选 择 直 接 出 现在 
同胞 p 元 素 后 面 的 p 元 素 























TD 另 参 见 第 ] 章 “ 父 元 素 和 子 元 素 ”。 
选择 器 中 的 :first-child 部 分 称 为 伪 


类 ,因为 它 标识 的 是 你 (设计 人 员 或 开发 人 员 ) 
无 需 在 HIML 代码 中 标记 的 一 组 元 素 。 


IE 6 既 不 支持 :first-child， 也 不 支 
持 相 邻 同 胞 选择 器 。 
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9.4.1 只 有 直接 跟 在 同胞 p 元 素 后 面 的 p 元 
素 显 示 为 红色 。 如 果 后 面 还 有 第 三 个 、 第 四 个 以 及 
更 多 的 段落 ， 它 们 也 将 显示 为 红色 。 例 如 ， 如 果 要 
对 除 第 一 个 段落 以 外 的 所 有 段落 进行 缩 进 ， 相 邻 同 
胞 结合 符 就 很 有 用 〈 另 见 彩 插 ) 






































CSS3 引入 了 普通 同胞 结合 符 ， 通 过 
它 可 以 选择 不 一 定 直接 出 现在 另 一 同胞 元 素 
后 面 的 同胞 元 素 。 它 与 相 邻 同胞 结合 符 的 唯 
一 区 别 是 使 用 ~ (波浪 号 ) 代替 十 分隔 同胞 
ZU. 例如 ，h1 ~ h2 ( color: red; } 会 让 
任何 属于 同一 父 元 素 的 同胞 hl 后 面 的 hz 元 
素 显 示 为 红色 (它们 可 以 直接 相 邻 ， 也 可 以 
不 直接 相 邻 ) ， 参 见 图 9.4.12。 


9.5 选择 元 素 的 一 部 分 


可 以 只 选择 元 素 的 第 一 个 字母 或 第 一 行 ， 
并 对 其 添加 样式 。 


1. 选择 元 素 的 第 一 行 

(1) 输入 element, XH element 是 要 对 
其 第 一 行进 行 格式 化 的 元 素 的 选择 器 。 

(2) 输入 :first-line 以 选择 第 一 步 中 引 
用 的 元 素 的 第 一 整 行 ， 参 见 图 9.5.1、 图 9.52 
和 图 9.5.3。 
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选择 元 素 的 第 一 个 字母 
(1) 输入 element, XEY element 是 要 对 
HENRETTE AEII TCR B SE TESS o 


Q) 输入 :first-letter 以 选择 第 (D 2b P 
引用 的 元 素 的 第 一 个 字母 ， 参 见 图 954 和 
9.5.5。 








«article class-"about"» 
«hi»Antoni Gaudí«/hi» 


«p»Many tourists are drawn to Barcelona 
— to see Antoni Gaudí's incredible 

— architecture.«/p» 

«p»Barcelona «a href-"http:// 

— www.gaudi2002.bcn.es/english/" 

— rel-'external'»celebrated the 150th 

— anniversary«/a» of Gaudí's birth in 
— 2002.«/p» 


«section class-"project"» 
«h2 lang-'es"»La Casa Milà«/h2» 
«p»Gaudí's work was essentially 
— useful. «span lang-'es"»La Casa 
— Milà«/span» is an apartment 
— building and «em»real people«/em» 
live there.«/p» 

«section» 


«section class-"project"» 
«h2 lang-'es"»La Sagrada Família«/h2» 
<p>The complicatedly named and 
— curiously unfinished Expiatory 
— Temple of the Sacred Family is the 
— «em»most visited«/em» building in 
— Barcelona.«/p» 

«/section» 

«/article» 














图 9.5.1 这 里 无 法 分 辨 哪些 文字 会 受到 first-line 
的 影响 ， 因 为 只 有 在 浏览 器 中 查看 页 面 ， 根 据 内 容 
的 流动 ， 才 能 看 出 哪些 文字 在 第 一 行 。 这 里 讲 的 第 














行 并 不 是 由 HTML 中 的 分 行 决定 的 








p:first-line { 
color: red; 
} 











图 9.5.2 ”这 个 选择 器 会 选择 每 个 p 元 素 的 第 一 行 








EEE IET ARE DE IN De Cdt yew Moy Bookmarks Tol 








| L Antoni Gaudi maoduaon zoo [Llanon Goudi introduction El- 
Antoni Gaudi Antoni Gaudi 
Many tounste are drawn to Barcelona 
ble 





La Casa Mila 
La Casa Mila 


Gaudfs work was casentially uscfil La Casa Milà is an. 
apartment bulding and rea! people kve there: Gandís work was essentially useful La 
Casa Milà is an apartment building and 
La Sagrada Familia real people ive there. 


The complicatediy named and curiously unfirashed La Sagrada Familia 











Expiatory Temple ofthe Sacred Family is the most visited 
building in Barcelona The romphratediy named and. 
curi ished Espiatory Temple 
of 'amily is the most 
visited bulding m Barcelona. 
^t HN x p 
9.5.3 调整 浏览 器 的 宽度 就 会 改变 第 一 行 的 内 








容 ( 并 会 改变 受 格式 化 影响 的 范围 ) 














p:first-letter { 
color: red; 
} 











9.5.4 ”这 个 选择 器 仪 会 选择 每 个 p 元 素 的 第 一 
个 字母 。 对 应 的 HTML 代码 见 图 9.5.1 








Antoni 


Many tourists are 
Antoni Gandis in 


Barcelona celebra 
Gaudi's birth in 2 











9.5.5 first-letter 可 用 于 创建 首 字母 下 沉 的 
效果 (但 要 等 讲 到 除 color 以 外 的 更 多 属性 以 后 ) 























根据 CSS 规范， 选择 器 应 包含 第 一 人 

字母 前 面 的 标点 符号 。 现 代 浏 览 器 都 支持 这 
一 特性 ， 但 旧版 本 的 IE 却 并 不 是 这 样 做 的 ， 

它 将 标点 符号 本 身 当做 第 一 个 字母 。 

只 有 某 些 特定 的 CSS 属性 可 以 应 用 于 
:first-letter 伪 元 素 ， 包 括 font、 
background、 text-decoration、 


color, 
vertical- 
要 :first-letter 不 是 浮动 的 ) 、 

text-transform, 


align ( X 
line-height, margin, 
padding, border, float fe clear, iX x £j 


将 在 第 10 章 和 第 11 章 讲 到 。 
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可 以 将 :first-letter 和 :first-line 伪 元 素 与 比 这 个 例子 中 的 选择 器 更 复杂 的 选择 
器 结合 使 用 。 例如， 如 果 要 选择 包含 在 project 类 元 素 中 的 每 个 段落 的 第 一 个 字母 ， 可 以 使 用 
.project p:first-letter, 


伪 元 素 、 伪 类 及 CSS3 的 : :first-line 和 : :first-letter 语法 

在 CSS3 中 ，:first-line 的 语法 为 ::first-line, :first-letter 的 语法 为 ::first- 
letter。 注 意 ， 它 们 用 两 个 冒号 代替 了 单个 冒号 。 

这 样 修改 的 目的 是 将 伪 元 素 ( 有 四 个 ， 包 括 ::first-line、::first-letter、::before 
fe ::after) 5443 (de :first-child, :link, :hover & ) KJ, 

457G X ( pseudo-element ) € HTML 中 并 不 存在 的 元 素 。 例 如 ， 定 义 第 一 个 字母 或 第 一 行 
文字 时 ,并 未 在 HTML 中 作 相 应 的 标记 。 它 们 是 另 一 个 元 素 (在 本 例 中 为 p 元 素 ) 的 部 分 内 容 。 

相反 ， 伪 类 (pseudo-class ) 则 应 用 于 HTML 元 素 。 例如， 使 用 :first-child 可 以 选择 
菜 元 束 的 第 一 个 了 元 来。 

未 来 ，::first-line 和 ::first-letter 这 样 的 双 冒 号 语法 是 推荐 的 方式 ， 现 代 浏 览 器 也 
支持 它们 。 原 始 的 单 冒号 语法 则 被 废弃 了 ,但 浏览 器 出 于 向 后 兼容 的 目的 ,仍然 支持 它们 ,不 过 ， 
IE9 之 前 的 Internet Explorer 版 本 均 不 支持 双 冒 号 。 因 此 ， 你 可 以 选择 继续 使 用 单 冒号 语法 ， 
除非 你 为 IE8 及 以 下 版 本 设置 了 单独 的 CSS. 





9.6 ” 按 状 态 选 择 链接 元 素 a:link { 


color: red; 
CSS 允许 根据 链接 的 当前 状态 对 它们 } 
进行 格式 化 。 链 接 的 状态 包括 访问 者 是 否 将 











a:visited ( 
鼠标 停留 在 链接 上 ， 链 接 是 否 被 访问 过 ， 等 color: orange; 
等 。 可 以 通过 一 系列 伪 类 实现 这 一 特性 ( 如 } 
图 9.6.1 和 图 9.6.2 所 示 ) o a:focus { 
color: purple; 
} 
<p>Many tourists are drawn to Barcelona h 
— to see Antoni Gaudí's incredible a:hover { 
» architecture.«/p» color: green; 
<p>Barcelona <http://www.gaudi2002. } 
» bcn.es/ english/">celebrated</a> the . 
— 150th anniversary of Gaudí's birth a:active ( 
— in 2002.«/p» color: blue; 
} 




















图 9.6.1 无 法 在 代码 中 指定 链接 的 状态 。 链 接 的 9.6.2 链接 的 样式 应 该 始终 按照 这 种 顺序 进行 
状态 是 由 访问 者 控制 的 。 伪 类 让 你 可 以 获取 链接 的 定义 ， 以 避免 链接 处 于 多 种 状态 ( 如 已 访问 和 鼠标 
状态 ， 以 改变 链接 在 该 状态 下 显示 的 效果 停留 ) IESUS TE 
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按 状态 选择 要 格式 化 的 链接 元 素 的 步骤 

(1) 输入 a (a 是 链接 元 素 的 名 称 ) 。 

Q) A : (冒号 )。 

(3) 输入 link 以 设置 从 未 被 激活 或 指向 
当前 也 没有 被 激活 或 指向 的 链接 的 外 观 ( 如 
图 9.6.3 所 示 ) o 

或 者 输入 visited 以 设置 访问 者 已 激活 过 
的 链接 的 外 观 ( 如 图 9.6.4 所 示 ) o 

或 者 输入 focus， 如 果 链 接 是 通过 键盘 选 
择 并 已 准备 好 激活 的 ( 如 图 9.6.5 所 示 ) o 

或 者 输入 hover 以 设置 正 被 指 问 的 链接 
的 外 观 ( 如 图 9.6.6 所 示 ) o 

或 者 输入 active 以 设置 激活 过 的 链接 的 
外 观 (如 图 9.6.7 所 示 ) o 











9.6.3 新 的 、 未 访问 的 链接 显示 为 红色 ( 男 见 
彩 插 ) 











LE 
e a 


9.6.5 ”链接 获得 焦点 〈 如 通过 Tab 键 ) 时 显示 
为 紫色 ( 男 见 彩 插 ) 






9.6.6 ” 当 访 问 者 将 鼠标 指针 停留 在 链接 上 时 ， 
它 显示 为 绿色 ( 男 见 彩 插 ) 


图 9.6.7 当 访 问 者 激活 链接 时 ， 它 变 为 蓝 色 Con 
见 彩 插 ) 


也 可 以 对 其 他 类 型 的 元 素 使 用 :active 
和 :hover 伪 类 。 例 如， 设置 p:hover ( color: 
red; } 以 后 ， 当 鼠标 停留 在 任何 段落 上 时 ， 
段落 都 会 显示 为 红色 。 ( 注意 ， 这 一 特性 仅 对 
Internet Explorer7 及 以 上 版 本 有 效 , 对 IE6 无 效 。 
同时 ，IE6 fe IE7 均 不 支持 对 a 使 用 :active, 
其 他 浏览 器 对 这 两 个 特性 都 支持 。 ) 


由 于 链接 可 能 同时 处 于 多 种 状态 (如 
同时 处 于 激活 和 鼠标 停留 状态 ) ， 且 晚 出 现 的 
规则 会 履 盖 前 面 出 现 的 规则 ， 所 以 ， 一 定 要 
按照 下 面 的 顺序 定义 规则 : Link、visited、 
focus, hover, active ( 缩写 为 LVFHA ) 。 
一 种 助 记 口诀 为 “Lord Vader s Former Handle 
Anakin” ( 达 斯 ' 维 达 的 原名 叫 安 纳 金 ) A 
人 提议 使 用 LVHFA 的 顺序 。 这 也 是 可 行 的 。 


9.7 ” 按 属性 选择 元 素 


可 以 对 具有 给 定 属性 或 属性 值 的 元 素 进行 
格式 化 (参见 图 9.7.1、 图 9.7.2 和 图 9.7.3 ) 。 
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«article class="about"> 


«hi»Antoni Gaudí</h1> 


<p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.</p> 
«p»Barcelona «a href-"http://www.gaudi2002.bcn.es/english/" rel-"external'»celebrated the 150th 
— anniversary«/a» of Gaudí's birth in 2002.«/p» 


«section class-"project"» 
«h2 lang-'es'»La Casa Milà«/h2» 


«p»Gaudí's work was essentially useful. «span lang-'es"»La Casa Milà«/span» is an apartment 
— building and «em»real people«/em» live there.«/p» 


«/section» 


«section class-"work'"» 


«h2 lang-'es'»La Sagrada Família«/h2» 
<p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is 
— the «em»most visited«/em» building in Barcelona.«/p» 


«/section» 


«article» 











9.7.1 出 于 演示 的 目的 ,将 第 二 个 section 元 素 的 class 值 由 project WR T work 














} 





section[class] { 


color: red; 








9.7.2 方 括号 包围 目标 属性 和 目标 属性 值 。 这 
个 例子 中 没有 属性 值 ， 它 选择 的 是 所 有 具有 class 


E 的 section 





9.7.3 ”每 个 包含 class Jg 
WH class 值 是 什么 ) 都 显示 为 纪 
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Antoni Gaudí 


Many tourists are drawn to Barcelona to see Antoni 
Gaudi's incredible architecture 


Barcelona celebrated the 150th anniversary of Gaudi's birth 
in 2002 


La Casa Milà 


Gaudi's work was essentially useful. La Casa Milà is an 
apartment building and rea! people live there. 


La Sagrada Familia 


The complicatedly named and curiously unfinished 
Expiatory Temple of the Sacred Family is the most visited 
building in Barcelona 

















的 section 元 素 (无 
[ 色 ( 另 见 彩 插 ) 


按 属性 选择 要 格式 化 的 元 素 的 步骤 

(1) 输入 element, XH element 是 要 考 
察 其 属性 的 元 素 的 选择 器 。 

(2) 输入 [attribute, ix Œ HS attribute 
是 选择 元 素 需要 考察 的 属性 的 名 称 。 

(3) 输入 ="vayJvue"， 表 示 属 性 值 等 于 这 
里 的 value 的 元 素 将 被 选中 。 或 者 输入 ~ 
="Value"， 表 示 属 性 值 包 含 这 里 的 value 的 元 
素 将 被 选中 (属性 值 还 可 以 包含 其 他 内 容 ， 
不 同 的 属性 值 之 间 用 空格 分 隔 ) 。 它 必须 匹 
配 完 整 的 单词 ， 而 不 是 单词 的 一 部 分 。 或 者 
输入 |-"value" (前面 是 管道 符号 ， 而 不 是 数 
字 1 或 小 写字 母 1) ， 表 示 属 性 值 等 于 这 里 的 
value 或 以 value 开头 〈 即 你 输入 的 值 后 面 加 
上 连 字符 ) 的 元 素 将 被 选中 。 (这 常常 用 以 
搜索 包含 lang 属性 的 元 素 。 ) 

或 者 输入 ^="vayue"， 表 明 属 性 值 以 这 里 
的 value 开头 〈 作 为 完整 的 单词 ， 或 单词 的 一 
部 分 ) 的 元 素 将 被 选中 ( 这 是 CSS3 中 新 增 的 
特性 ， 参 见 本 节 提 示 ) o 





AR 
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或 者 输入 $="value"， 表 明 属 性 值 以 这 里 
的 value 结尾 作为 完整 的 单词 , 或 单词 的 一 
部 分 ) 的 元 素 将 被 选中 ( 这 是 CSS3 中 新 增 的 
特性 ， 参 见 本 节 提 示 ) 。 

或 者 输入 *="valwe"， 表明 属性 值 至 少 包 
Aix value 一 次 的 元 素 将 被 选中 。 也 就 是 
Wi, value 不 必 是 属性 值 中 的 完整 单词 (这 是 
CSS3 中 新 增 的 特性 ， 参 见 本 节 提 示 ) 。 

(4) 输入 ]。 


























更 多 属性 选择 器 示例 


当前 所 有 主流 浏览 器 ( 包括 IE7 ) Hj 
支持 按 元 素 包 含 的 属性 ( 和 属性 值 ) 选 择 元 素 。 
对 于 第 (3) 步 中 提 到 的 CSS3 中 新 增 的 属性 选 
择 器 ，IE7 和 IE8 有 一 些 异 常 。 更 多 信息 参见 
http://reference.sitepoint.com/css/css3attribute- 
selectors 。 


属性 选择 器 非常 强大 。 这 里 给 出 更 多 的 例子 ， 演 示 属 性 选择 器 几 种 不 同 的 使 用 方式 。 这 


些 例 子 在 实践 中 也 用 得 上 。 


O 这 个 选择 器 选择 任何 rel 属性 值 等 于 external ( 必须 完全 匹配 ) 的 a 元 素 。 


a[rel-"external"] { 
color: red; 


} 


O 假设 某 section 元 素 有 两 个 类 ， 如 《section class="project barcelona">, 5— 
个 section 有 一 个 类 ， 如 《section class="barcelona">, ~ = 语法 可 以 测试 单词 
的 部 分 匹配 ， 即 匹配 出 现在 以 空格 相隔 的 单词 列表 中 的 完整 的 单词 。 在 这 个 例子 中 ， 


两 个 元 素 都 将 显示 为 红色 。 

section[class ~ -"barcelona"] { 
color: red; 

J 


section[class*="barc"] { 
color: red; 


} 


部 分 字符 囊 ( 不 需要 完整 的 单词 ) */ 


/# 这 个 选择 器 无 法 匹配 ， 因 为 barc 并 不 是 空格 分 隔 的 列表 中 的 某 个 完整 单词 */ 


section[class ~ -"barc"] { 
color: red; 


} 


O 这 个 选择 器 选择 任何 带 有 lang 属性 且 属 性 值 以 es 开头 的 hz。 在 HTML 代码 示例 A 


见 图 9.7.1 ) 中 有 两 个 这 样 的 实例 。 
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h2[lang|="es"] { 
color: red; 


} 


口 通过 使 用 通用 选择 器 ， 这 个 选择 器 选择 任何 带 有 lang 属性 且 属 性 值 以 es 开头 的 元 素 。 
在 HTML 代码 示例 (参见 图 9.7.1 ) 中 有 三 个 这 样 的 实例 。 


*[lang]-"es"] { 
color: red; 


} 


O 通过 联合 使 用 多 种 方法 ， 这 个 选择 器 选择 所 有 了 既 有 任意 href 属性 ， 又 有 任意 属性 值 
包含 单词 howdy 的 title 属性 的 a 元素 。 


a[href][title ~ -"howdy"] { 
color: red; 


} 


口 作为 上 一 选择 器 的 精确 度 低 一 些 的 变 体 ， 这 个 选择 器 选择 所 有 既 有 任意 href 属性 ， 
又 有 任意 属性 值 包含 how ( 作为 完整 的 单词 或 单词 的 一 部 分 ， 它 匹配 how, howdy, 
show 等 ， 无 论 how 出 现在 属性 值 的 什么 位 置 ) title 属性 的 aX. 
a[href][title*-"how"] { 

color: red; 
} 
O 这 个 选择 器 匹配 任何 href 属性 值 以 http:// 开头 的 a 元 素 。 


a[href^z"http://"] ( 
color: orange; 


} 
O 这 个 选择 器 匹配 任何 src 属性 值 完 全 等 于 1ogo.png 的 img 元 素 。 


img[src="logo.png"] { 
border: 1px solid green; 


} 
O 这 个 选择 器 的 精确 度 比 前 一 个 低 一 些 ， 它 匹配 任何 src 属性 值 以 .png 结尾 的 img 元 素 。 


img[src$-".png"] { 
border: 1px solid green; 


} 


这 些 例子 并 不 代表 你 能 实现 的 所 有 效果 ， 不过， 项 望 它们 可 以 激发 你 继续 探索 。 
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9.8 指定 元 素 组 


经 常 需要 将 相同 的 样式 规则 应 用 于 多 个 
元 素 。 可 以 为 每 个 元 素 重 复 地 设置 样式 规则 ， 
也 可 以 组 合 选择 器 , 一 次 性 地 设置 样式 规则 。 
当然 ， 后 一 种 方法 效率 更 高 ， 通 常 也 会 让 样 
式 表 更 易于 维护 。 


将 样式 应 用 于 元 素 组 的 步骤 

(1) 输入 selector1， 这 里 的 selectori 是 
受 样式 规则 影响 的 第 一 个 元 素 的 名 称 。 

DMA, EF) 。 

(3) 输入 selector2, 3X Hi) selector2 是 
受 样式 规则 影响 的 下 一 个 元 素 的 名 称 。 

(4) 对 其 他 每 个 元 素 重 复 第 (2) 步 和 第 (3) 
步 。 具 体 示 例 参 见 图 9.8.1。 











«article id-"gaudi" class="about"> 
«hi»Antoni Gaudí«/hi» 


<p>Many tourists are drawn 
«p»Barcelona ...«/p» 


esp» 


«section class-"project"» 
«h2 lang-'es"»La Casa Milà«/h2» 
«p»Gaudí's work was ...«/p» 


«/section» 


«section class-"project"» 
«h2 lang-"es"»La Sagrada Familia 
^ </h2> 
<p>The complicatedly named ...«/p» 
«/section» 
«/article» 











9.8.0 ”这 段 代码 包含 一 个 hi 和 两 个 h2 

通过 元 素 组 添加 样式 只 是 一 种 简写 方 
式 。h1，h2 ( color: red; } 这 个 规则 与 hi { 
color: red; ) fe h2 ( color: red; } 这 两 个 规 
则 的 效果 完全 一 样 ， 如 图 9.82 和 图 9.83 所 示 。 





h1, 
h2 { 

color: red; 
} 


9.8.2 可 以 列 出 任意 数量 的 单独 的 选择 器 (无 
论 它 们 包含 的 是 元 素 名 称 、id 还 是 class ) ， 只 要 
有 逗号 分 隔 它 们 。 不 一 定 像 示例 代码 那样 让 每 个 选 
择 右 位 于 单独 的 行 , 不 过 很 多 开发 人 员 坚 持 这 样 做 ， 
以 增强 代码 的 可 读 性 。 当 选择 髓 很 长 时 ， 这 样 做 的 
好 处 更 明显 
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Antoni Gaudí 


Many tourists are draven to Barcelona to see Antoni 
Gaudi's incredible architecture. 


Barcelona celebrated the 150th anniversary of Gaudi's 
birth in 2002. 


La Casa Milà 


Gaudi's work was essentially useful. La Casa Milà is an 
apartment building and rea people live there. 


La Sagrada Família 


The complicatedly named and curiously unfinished 
Expiatory Temple of the Sacred Family is the most visited 
building in Barcelona. 





9.8.3 通过 同一 条 样式 规则 ， 可 以 让 hl 和 h2 
元 素 都 显示 为 红色 〈 另 见 彩 搬 ) 





可 以 组 合 使 用 任何 类 型 的 选择 器 ， 从 
最 简单 的 (如 图 9.8.2 所 示 ) 到 最 复杂 的 都 可 
以 。 例 如 ， 可 以 使 用 h1, .project p:first- 
letter 来 选择 一 级 标题 以 及 包含 在 class 等 
于 project 的 所 有 元 素 中 的 p 元 素 的 第 一 个 
字母 。 
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有 时 ， 为 可 应 用 于 多 个 选择 器 的 共同 
样式 创建 一 个 样式 规则 ， 再 为 没有 共同 点 的 
样式 分 别 创 建 单独 的 样式 规则 是 很 有 用 的 。 
要 记 住 ， 在 样式 表 中 后 指定 的 规则 会 覆盖 先 
指定 的 规则 (参见 7.3 节 ) 。 


9.9 组 合 使 用 选择 器 


本 章 的 示例 都 尽量 保持 简单 ， 以 便 你 全 面 
了 解 各 种 类 型 的 选择 器 。 不 过 ， 现 实 中 常常 需 
要 组 合 使 用 这 些 技术 ,才能 找到 要 格式 化 的 元 
素 ， 但 这 也 是 选择 器 的 功能 强大 之 所 在 。 

图 9.9.1 (实现 结果 见 图 9.9.2 ) 通过 一 个 
极端 的 例子 展示 了 如 何 组 合 使 用 选择 器 。 这 
里 展示 了 了 几 种 实现 同样 效果 的 不 同方 式 ， 它 
们 是 按 特殊 性 由 低 向 高 排列 的 。 


em ( 

















color: red; 


} 


.project em { 
color: red; 


} 


.about .project em { 
color: red; 


} 


#gaudi em { 
color: red; 


} 


上 面 都 是 你 每 天 编写 CSS 经 常用 到 的 典 
型 的 选择 器 类 型 ( 不过， 前 面 提 到 过 ， 最 好 
尽量 少 用 id 选择 器 ) 。 对 大 多 数 设 计 来 说 ， 
无 论 它 们 看 起 来 有 多 复杂 ， 都 用 不 着 编写 那 
些 近乎 疯狂 的 选择 器 。 











.project h2[lang|z"es"] + p em ( 
color: red; 
} 











9.9.1. 这 对 你 来 说 可 能 是 个 挑战 。 从 右 向 左 看 ， 
它 表 明 “ 仅 选择 en 元 素 ， 它 们 包含 在 p 元 素 中 ， 
这 样 的 p 元 素 是 1ang 属性 值 以 es 开头 的 h2 元 素 
的 直接 相 邻 同胞 元 素 ， 且 是 class 等 于 project 的 





























任何 元 素 的 子 元 素 ”。 和 弄 明 白 了 吗 ? 实际 上 ， 你 很 
少 需要 编写 这 么 复杂 的 选择 器 ,但 至 少 你 需要 知道 ， 
必要 时 可 以 这 样 做 。 或 者 ， 当 你 想 吓 距 阅 读 你 代码 
的 人 时 可 以 这 样 做 
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Antoni Gaudí 


Many tourists are drawn to Barcelona to see Antoni 
Gaudi's incredible architecture. 


Barcelona celebrated the 150th anniversary of Gaudi's 
birth in 2002. 


La Casa Milà 


Gaudi's work was essentially useful. La Casa Milà is an 
apartment building and rea! peopie live there. 


La Sagrada Família 


The complicatedly named and curiously unfinished 
Expiatory Temple of the Sacred Family is the wost visited 
building in Barcelona. 








图 9.9.1 中 所 有 那些 东西 只 是 让 em 2628 


图 9.9.2 
显示 为 红色 吗 ? ! 如 果 你 认为 简单 地 写成 .about 
em { color: red; } 要 好 得 多 (也 更 易于 维护 )， 
你 肯定 是 对 的 。 除 非 你 需要 特别 高 的 特殊 性 ， 和 否则 
不 必 使 用 这 些 吓 人 的 玩意 ( 另 见 彩 搬 ) 
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因此 ， 必 要 的 时 候 可 以 组 合 使 用 选择 器 ， 
不 过 ， 最 好 将 特殊 性 控制 在 刚好 需要 的 程度 。 
例如 ， 如 果 你 只 想 选 择 包 含 在 class-"project" 
的 元 素 内 的 em 元 素 ， 可 以 使 用 .project 
em ( color: red; ). /S/ HTML 中 em 
JUR Je CEHÉE p 元 素 中 的 ， 但 没有 必要 写成 
.project p em ( color: red; }， 除 非 你 不 想 
为 段落 以 外 的 em 元 素 应 用 该 样式 。 总 之 ， 从 
最 简单 的 开始 ， 按 需 增加 特殊 性 。 

















更 多 CSS3 选择 器 

CSS3 为 你 的 工具 箱 增加 了 不 少 新 的 选 
择 器 。 你 已 经 在 本 章 中 见 到 了 其 中 的 一 些 。 
其 他 的 新 选择 器 大 多 为 伪 类 ， 其 中 的 一 些 
还 相当 复杂 ， 不 过 也 非常 强大 。 所 有 CSS3 
选择 器 及 其 完整 描述 见 www.w3.org/TR/ 
css3-selectors/#selectors， 简 介 与 示例 参见 
Www.Ww3.0rg/wiki/CSS/Selectors， 浏 览 器 支 
持 情况 参见 http://findmebyip.conylitmus。 
你 将 看 到 ， 除 了 Internet Explorer 以 外 ， 
其 他 浏览 器 的 支持 程度 都 很 好 。Internet 
Explorer 直到 下 9 才 开始 支持 大 多 数 CSS3 
中 新 增 的 选择 器 ( 尤其 是 伪 类 和 伪 元 素 ) 。 


9.10 选择 器 回顾 


回顾 一 下 ， 我 们 讨论 了 以 下 类 型 的 选择 
器 (它们 均 可 组 合 使 用 ) : 
口 按 上 下 文选 择 元 素 
口 按 名 称 选择 元 素 
口 按 class 或 id 选择 元 素 
口 通过 伪 类 或 伪 元 素 选 择 元 素 
口 根据 属性 选择 元 素 

















文本 的 格式 化 








本 章 内 容 

口 选择 字体 系列 

口 指定 替代 字体 

口 创建 斜体 

口 应 用 粗 体格 式 

口 设置 字体 大 小 

口 设置 行 高 

口 同时 设置 所 有 字体 值 
口 设置 颜色 

口 修改 文本 的 背景 
口 控制 间距 

口 增加 缩 进 

口 设置 空白 属性 

口 对 齐 文本 

口 修改 文本 的 大 小 写 
口 使 用 小 型 大 写字 母 
口 装饰 文本 











使 用 CSS 可 以 修改 文本 的 字体 、 大 小 、 
粗细 、 倾 斜 、 行 高 、 前 景 和 背景 颜色 、 间 距 
和 对 章 方式 ， 可 以 决定 是 否 为 文本 添加 下 划 
线 或 删除 线 ， 可 以 将 文本 转化 为 全 部 使 用 大 
写字 母 、 全 部 使 用 小 写字 母 或 使 用 小 型 大 写 
字母 。 而 且 ， 通 过 短 短 几 行 代 码 就 可 以 让 这 
些 样式 应 用 于 整 篇 文档 或 整个 网 站 。 在 本 章 
中 ， 你 将 学 习 如 何 做 到 这 些 。 

尽管 本 章 中 讨论 的 很 多 属性 主要 是 应 用 














于 文本 的 ， 但 这 并 不 意味 着 它们 只 能 应 用 于 文 
本 。 其 中 很 多 属性 也 可 以 应 用 于 其 他 类 型 的 内 
容 。 图 10.0.1 是 一 个 没有 应 用 任何 样式 表 的 页 
面 ， 本 章 接 下 来 会 将 其 各 部 分 的 文本 格式 化 。 
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Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet but frm devotion to 
the church, made a unique foundation for his thoughts and ideas. His search for simplicity, based on his 
careful observations of nature are quite apparent in his work, from the Park Guell and its incredible. 
sculptures and mosaics, to the Church of the Sacred Family and its organic, bulbous towers 


La Sagrada Família 


i 4 
[s a 
Y : 
= à » =% 


The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple ofthe 
Sacred Family is the most visited building in Barcelona In it, Gaudi combines his vision of nature and 
architecture with his devotion to his faith. His focus on this project was so intense that he shunned all 
other projects, slept in an apartment at the work site surrounded by plans and drawings, and so 
completely ignored his dissheveled appearance that when, in 1926, he was struck by a streetcar in front 
ofthe church, he was mistaken for an indigent and brought to a hospital for the poor where he died soon 
thereafter. 

The Sagrada Familia attracts even the non-religious to its doors in large part due to this tragic story and 
its still unfinished state, of which the everpresent scaffolding and cranes are permanent reminders. But 
there is something more. In the Sagrada Familia, Gaudí again brings nature and architecture 
together--the soaring spires look something like rising stalagmites in an underground cave--this time in 
Park Guell 


Ed | ad jo 
[s 


The Park Guell always reminds me of Howard Roark in Ayn Rand's The Fountainhead. Gaudi's 
project in the Park Guell was to build a residential community whose residents would love where they 
lived. It was never finished. 


Perhaps that is for the best, since now we all get to enjoy it. The Park Guell is set on a hill overlooking 
practically all of Barcelona. Its beautiful and even comfortable serpentine bench is filled with foreigners 
and locals alike every day of the week. Its mosaic lizard have become synonymous with the city itself 

| 


图 10.0.1. 这 是 一 个 没有 应 用 任何 样式 表 的 页 面 
的 样子 。 (在 不 同 的 浏览 器 中 ， 默 认 的 标题 字号 可 
能 不 一 样 。 ) 可 以 在 本 书 网 站 的 示例 部 分 找到 它 的 
HTML 源 代码 ( 以 及 接 下 来 的 CSS 示例 ) : www. 


bruceontheloose.com/htmlcss/examples/ ( 男 见 彩 插 ) 
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第 11 章 会 接着 讨论 CSS 布局 。 


10.1 圣 字体 系列 


对 于 自己 的 网 站 ， 一 个 很 重要 的 选择 就 
是 选择 标题 和 主体 文本 所 用 的 字体 。 你 将 了 
解 到 ， 并 非 所 有 的 系统 都 支持 相同 的 默认 字 
体 ， 因 此 ， 应 该 定义 蔡 代 字体 作为 备 选 。 不 
过 ， 让 我 们 首先 看 看 如 何 定 义 单个 字体 ( 如 
图 10.1.1 和 图 10.1.2 所 示 ) ， 以 及 未 提供 蔡 
代 字 体 的 影响 ( 如 图 10.1.3 所 示 ) o 


body { 
font-family: "Palatino Linotype"; 
} 


hi, h2 ( 
font-family: "Arial Black"; 
) 























10.1.1. 由 于 对 body 元 素 设置 了 Palatino Linotype 
字体 ， 该 设置 会 传递 给 其 他 元 素 。 通 过 对 hi 和 h2 
元 素 设置 Arial Black 字体 ， 上 述 设置 被 覆盖 了 。 
不 过 ， 你 即将 看 到 ， 仅 仅 定义 单个 字体 是 不 够 的 ， 
为 并 非 所 有 操作 系统 都 支持 这 种 字体 。 示 例 中 
的 Palatino Linotype 是 Windows 上 的 常见 字体 ， 但 
Mac OS 或 Linux 系统 上 可 能 没有 这 种 字体 























La Sagrada Familia 


Qu E w Sue 


The cormplicatadly named and curiously unfinished masterpiece that is the Ex ui ator eya Tiik 
of the Sacred Family is the most visited building in Barcelona. In it, Gaudí « E 








10.1.2 n Windows 系统 中 ，Palatino Linotype 
字体 已 经 安装 ， 可 以 正常 显示 。 如 你 所 见 ，body 
的 font-family 设置 传递 给 了 a 和 p 元素 。 如 果 没 
有 为 hl 和 h2 指定 Arial Black 字体 ， 它 们 也 将 显示 
为 Palatino Linotype 字体 
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Antoni Gaudfs incredible buildings bring millions of tourists to Barcelona each year. 

Guudf's non-conformity, already visible in his teenage years, coupled with his quiet but firm devotion t» 
the church, made a unique foundation tor his thoughts and ideas, His search for simplicity, based on his 
careful observations of naturc are quite apparent in his work, fia o Purk aali and rn incredible 
sculptures and mosaics, to the Church of the 


La Sagrada Famílla 
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图 10.1.3 ”一些 Mac 系统 中 并 未 安装 Palatino Linotype 
字体 。 如 果 选 择 了 访问 者 系统 中 没有 的 字体 ， 他 们 
的 浏览 器 中 就 会 显示 默认 字体 (如 图 所 示 ， 在 这 个 
例子 中 是 Times 字体 ) 





设置 字体 的 方法 
在 样式 表 中 需要 的 选择 器 之 后 ， 输 入 
这 里 的 name 是 首选 字体 


font-family: name, 


的 名 小 。 


ES «064 
用 引号 ( 单 引号 或 双 引 号 ) 


多 个 单词 的 字体 名 称 ， 应 该 
包围 起 来 。 


如 果 字 体 名 称 包含 非 ASCI 字符 ， 
就 必须 声明 样式 表 的 编码 ， 即 在 样式 表 的 第 
NÉ Gcharset "UTF-8";。 实 际 上 ， 即 使 

AEA E R, 对 所 有 样式 表 都 这 
样 做 也 没有 坏处 。 这 样 做 可 以 避免 日 后 出 现 
问题 。 


GHES ”可 以 指定 想 要 设置 的 任何 字体 ， 不 过 
访问 者 只 会 看 到 他 们 的 系统 里 安装 的 字体 。 
更 多 细节 参见 下 一 节 。 


使 用 通用 的 font 属性 可 以 一 次 性 定 
义 字 体 、 大 小 和 行 高 。 参 见 10.7 节 。 


S font-family 属性 是 继承 的 。 
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10.2 ”指定 替代 字体 


尽管 开发 人 员 或 设计 人 员 可 以 指定 自己 
想 要 的 任何 字体 ， 但 是 对 于 访问 者 来 说 ， 只 
有 当 他 们 的 计算 机 上 也 安装 了 这 种 字体 的 时 
候 ， 他 们 才能 看 见 这 种 字体 。 因 此 ， 最 好 使 
用 访问 者 系统 上 理应 包含 的 那些 字体 。 这 里 
有 一 段 Windows 和 Mac OS 默认 都 包含 的 字 
体 的 列表 (详细 信息 见 “Mac OS 和 Windows 
上 默认 共有 的 字体 ”) 。 

此 外 ， 还 有 其 他 需要 考虑 的 问题 。 如 果 
要 指定 的 字体 在 两 种 操作 系统 上 的 名 称 不 一 
样 ， 就 可 以 同时 指定 这 两 个 名 称 ， 而 操作 系 
统 会 使 用 它 安 装 了 的 那 一 个 。 类 似 地 ， 如 果 
要 指定 的 字体 只 存在 于 一 种 操作 系统 ， 就 可 
以 为 另 一 种 操作 系统 选择 一 个 奉 代 字体 。 这 
两 个 字体 可 能 并 不 完全 一 样 ， 但 这 样 做 的 目 
的 是 指定 尽 可 能 接近 的 字体 。 最 后 一 点 ， 最 
好 指定 一 种 表示 类 属 的 标准 字体 2， 以 防 系统 
对 所 列 的 字体 都 不 支持 ， 参 见 图 10.2.1、 图 
10.2.2 和 图 10.2.3。 


指定 替代 字体 的 步骤 

(1) 输入 font-family: mame， 这 里 的 name 
是 首选 字体 的 名 称 。 

(2) 输入 ，mame2， 这 里 的 name2 是 第 二 字 
体 的 名 称 。 用 一 个 逗号 和 空格 分 隔 每 个 字体 。 

(3) 根据 需要 ， 重复 第 (2) 步 ， 最 后 以 
一 个 表示 类 属 的 标准 字体 (serif, sans- 
serif, cursive, fantasy 或 monospace2， 它 
们 代表 首选 字体 最 为 接近 的 风格 ) 结束 字体 
列表 。 
































body { 
font-family: "Palatino Linotype", 
— Palatino, serif; 


) 


h1, 

h2 { 
font-family: "Arial Black", Arial, 
—> sans-serif; 








} 








10.2.1 Æ font-family 属性 中 可 以 包含 替代 
字体 。 如 果 系 统 上 没有 安装 首选 字体 ， 浏 览 器 就 
会 使 用 蔡 代 字体 。 在 这 个 例子 中 ， 我 们 告诉 浏览 
右 ， 如 果 系 统 未 安装 Palatino Linotype 字体 ， 就 寻 
JÈ Palatino 字体 (参见 图 10.2.3 ) ; 如 果 这 两 种 字 
体 都 未 安装 ， 就 退回 到 标准 的 serif 字体 。 在 font- 
family 属性 中 声明 的 字体 列表 称 为 字体 栈 (C font 
stack) 。 此 外 ， 标 题 也 添加 了 替代 字体 






































可 以 在 同一 个 font-family 规则 中 为 
不 同 的 字母 表 指 定 字体 ( 如 日 语 和 英语 ) ， 
从 而 对 包含 不 同 语言 和 书写 体系 的 文本 进行 
格式 化 。 


系统 通常 都 具有 下 列表 示 类 属 的 字 
体 名 称 对 应 的 字体 : serif, sans-serif, 

cursive, fantasy 和 monospace。 因 此 ， 标 准 
的 做 法 是 在 字体 栈 的 末尾 指定 上 述 字 体 名 称 
中 的 一 种 ， 以 防 所 有 其 他 的 字体 都 未 安装 。 

其 中 ，serif fe sans-serif 是 (目前 为 止 ) 用 
最 多 的 ， 因 为 它们 分 别 对 应 于 最 为 常见 的 


取 


3i R 





CD. 表示 类 属 的 标准 字体 指 的 是 serif, sans-serif 等 字体 ， 它 们 表示 的 不 是 单个 字体 ， 而 是 一 类 字体 ， 例 如 ，serift 表 
示 有 衬 线 字体 ( 在 字 的 笔画 开始 、 结 束 的 地 方 有 额外 的 装饰 ， 且 笔画 的 粗细 有 差异 )，sans-serif 表示 无 衬 线 字 体 


〈 字 的 笔画 无 额外 的 装饰 ， 粗 细 差 不 多 ) 一 一 译 者 注 
(2) cursive, fantasy, monospace 分 别 表示 手写 字体 、 装 








饰 字体 和 等 宽 字 体 。 一 一 译 者 注 
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Barcelona's Architect 


Barcelona's Architect 
Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 
Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 
Gaudí's non-conformity, already visible in his teenage years, coupled with his quiet but firm 


Gaudf's non-conformity, already visible in his teenage years, coupled with his quiet but firm devotion to the church, made a unique foundation for his thoughts and ideas. His search for 
devotion to the church, made a unique foundation for his thoughts and ideas, His search for simplicity, based on his careful observations of nature are quite apparent in his work, from the 
simplicity, based on his careful observations of nature are quite apparent in his work, from the Park Guell and its incredible sculptures and mosaics, to the Church of the Sacred Family and 
Park Guell and its incredible sculptures and mosaics, to the Church of the Sacred Family and its organic, bulbous towers. 


its organic, bulbous towers, 


La Sagrada Família La Sagada Pama 


Je fyf Tekr 


The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple 
The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple Ë of the Sacred Family is the most visited building in Barcelona. In it, Gaudí combines his vision 
of the Sacred Family is the most visited building in Barcelona. In it, Gaudí combines his vision 














图 10.2.2 ”安装 了 Palatino Linotype 字体 的 系统 会 10.2.3 没有 Palatino Linotype 字体 的 系统 会 使 

继续 使 用 该 字体 用 Palatino 字体 ( 只 要 该 系统 有 这 种 字体 ; 大 多 数 
Mac 系统 都 有 这 种 字体 ) 。 如 果 Palatino 也 没有 ， 
浏览 器 会 试 着 寻找 第 三 个 选项 。 几 乎 所 有 的 系统 
均 包 含 serif 类 和 sans-serif 类 字体 。 注 意 ， 不 同 字 
体 默认 的 行 高 并 不 相同 。 稍 后 我 们 将 对 行 高 进行 


调整 
































Mac OS 和 Windows 上 默认 共有 的 字体 

Mac OS 和 Windows 上 默认 都 有 的 字体 是 非常 有 限 的 ， 它 们 仅 包 括 Arial, Arial Black, 
Comic Sans MS, Courier New, Georgia, Impact, Trebuchet MS, Times New Roman 和 
pnr. 结果 , 绝 大 多 数 网 站 使 用 Pu (其 中 Arial 可 能 是 用 得 最 多 的 一 个 ) 。 

它们 在 Mac OS 和 Windows 上 的 浏览 器 中 显示 的 效果 也 并 不 完全 一 致 ， 但 至 少 你 可 以 肯 

Mos E 

除 此 之 外 ， 还 有 别 的 选择 。Mac OS 和 Windows 都 包含 了 更 多 ( 却 不 相同 的 ) 可 用 于 字 
体 栈 的 系统 字体 。 在 网 上 搜索 “font stacks” ( 字体 栈 ) ， 就 可 以 看 到 很 多 font-family 声明 。 
可 以 将 这 些 声明 复制 到 你 的 样式 表 里 ， 从 而 为 不 同 的 访问 者 提供 相似 的 字体 。 

此 外 ， 还 可 以 在 网 页 中 加 载 系统 默认 没有 的 字体 ， 这 种 方式 变 得 越 来 越 普 遍 。 第 13 章 将 
讲解 如 何 实现 这 种 方式 。 


10.3 创建 斜体 浏览 器 通常 让 一 些 HTML 元 素 (如 cite, 
em Ail i) WR DURER, 因此 ， 不 必 在 

在 传统 出 版 业 中 , 斜体 通常 用 来 表示 引述 、 ”Css 中 对 这 些 元 素 设 置 斜 体 。 正 如 1.2 节 中 讲 
强调 的 文本 、 外 文 后 词 ( 如 de mgwewr)、 科 到 的 ,HTML 用 于 描述 内 容 的 含义 ， 而 不 是 
SEATS] CAII Homo sapiens ) , FETA 控制 它们 显示 的 样子 。 有 时 你 需要 让 一 些 内 
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容 以 斜体 显示 ， 但 不 应 该 通过 使 用 上 述 元 素 
对 它们 进行 标记 以 创建 和 斜体。 通过 使 用 CSS 
的 font-style 属性 ， 可 以 让 任何 元 素 中 的 文 
本 以 斜体 显示 。 

作为 示例 ， 图 10.3.1 说 明了 如 何 对 段落 
Ems (由 于 这 样 显 示 难 以 阅读 ， 
因此 ， 这 一 样式 规则 将 在 接 下 来 的 例子 中 去 
掉 。 ) 














body { 
font-family: "Palatino Linotype", 
Palatino, serif; 


} 


hi, 

h2 ( 
font-family: "Arial Black", Arial, 
— sans-serif; 

j 

pt 
font-style: italic; 

j 


图 10.3.1 











在 这 个 例子 中 ， 段 落 以 斜体 显示 


字体 的 斜体 版 本 通常 是 由 字体 设计 师 
从 头 创建 的 ， 尤 其 是 有 衬 线 字 体 。 字 体 的 斜 
体 版 本 不 仅仅 是 普通 文本 的 倾斜 版 本 ， 它 们 
的 形式 有 一 些 合理 的 差异 。 例 如 ，Palatino 
Linotype 就 有 一 份 真正 的 斜体 字体 ， 参 见 
图 10.3.2。 通 过 字母 a 可 以 很 清晰 地 看 到 ， 儿 
体 不 仅仅 是 对 字母 进行 倾斜 产生 的 效果 。 不 
过 ， 有 的 字体 并 没有 和 斜体 版 本 。 如 果 对 这 些 
字体 的 文本 设置 font-style: italic, 浏览 器 
就 会 显示 一 种 计算 机 模拟 出 来 的 假 斜 体 ， 即 
简单 地 对 普通 字母 进行 倾斜 以 模拟 斜体 风格 。 
这 两 种 方式 的 质量 是 有 所 不 同 的 。 
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the Sacred Family is the most visited building in Barcelona. In it, Gaudi combine: 








10.3.2 ”段落 以 斜体 显示 ,但 顶部 的 列表 和 标题 
没有 以 斜体 显示 

此 外 ,字体 设计 师 还 可 能 专门 为 字体 
创建 倾斜 版 本 ,它们 通常 是 对 普通 字母 进行 
倾斜 ， 同 时 可 能 对 字符 间距 等 进行 微调 而 产 
生 的 ， 与 普通 字母 相 比 ， 字 母 本 身 的 形状 是 
相同 的 。 要 使 用 字体 的 倾斜 版 本 ， 可 以 设置 
font-style: oblique;, 不 过 这 样 做 并 不 常见 。 
如 果 字 体 没 有 斜体 版 本 或 倾斜 版 本 ， 就 会 以 
伪 斜 体 显示 。 


1. 创建 斜体 

(1) 输 入 font-style:。 

(2) 在 : CH) 后 输入 italic (创建 斜 
体 文本 ) 或 oblique ( 创建 倾斜 文本 ) 。( 99% 
的 情况 下 都 会 使 用 italic。 在 所 有 情况 下 ， 
很 难 察觉 使 用 oblique 与 italic 的 差异 。 ) 


2. 取消 斜体 
输入 font-style: 


想 取消 斜体 的 一 个 可 能 的 原因 是 ， 要 
在 从 父 元 素 中 继承 了 斜体 格式 的 段落 中 对 菜 
些 文 字 进 行 强调 。 关 于 继承 的 更 多 细节 ， 参 
考 7.3 节 。 






































normal. 


font-style 属性 是 继承 的 。 
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10.4 应 用 粗 体格 式 


粗 体 格式 可 能 是 让 文本 突出 显示 的 最 常 
见 、 最 有 效 的 方式 。 人 例如， 浏览 需 通常 默认 
为 hl ~ he 添加 粗 体 格式 。 同 斜体 一 样 ， 可 以 
为 任何 格式 添加 或 取消 粗 体 。 样 式 表 为 粗 体 
提供 了 很 强 的 灵活 性 ， 可 以 控制 粗细 的 相对 
值 。 不 过 ， 字体 本 身 通常 并 未 包含 与 相对 值 
对 应 的 不 同 粗 细 版 本 ， 因 此 不 同 相 对 值 下 显 
示 的 效果 常常 是 一 样 的 (如果 有 疑问 ， 不妨 
直接 设 为 bold ) , 如 图 10.4.1 和 图 10.4.2 所 示 。 






































body ( 
font-family: "Palatino Linotype", 
— Palatino, serif; 


} 


hi, 

h2 ( 
font-family: Arial, Helvetica, 
— sans-serif;) 


h2 ( 
font-weight: normal; 
} 


em, 
a:link, 
a:hover { 

font-weight: bold; 
} 


图 10.4.1 浏览 器 会 自动 为 标题 CAD hi, h2) 添加 
粗 体格 式 。 我 为 所 有 的 hz 元 素 应 用 了 正常 的 粗细 ， 
取消 了 自动 添加 的 粗 体格 式 , 你 应 该 可 以 看 出 页 面 
的 差异 。 同 时 ， 我 为 em 文本 及 新 的 链接 、 鼠 标 停留 
的 链接 添加 了 粗 体 格式 (参见 图 10.4.2). ( 注意 ， 
我 将 标题 的 font-family 从 Arial Black 字体 改 成 了 
Arial， 仅 为 本 节 举 例 用 。 参 见 倒数 第 二 条 提示 。 ) 
























































1. 应 用 粗 体格 式 

(1) 输入 font-weight: 

(2) 输入 bold， 让 文本 显示 为 具有 平均 加 
粗 值 的 粗 体 。 这 一 属性 值 适用 于 大 多 数 情况 。 





或 者 输入 bolder (更 粗 ) 或 lighter (更 
以 设置 相对 当前 粗细 的 值 。 

或 者 输入 100 ~ 900 之 间 的 100 的 倍数 ， 
其 中 400 代表 正常 粗细 ，700 bn 
使 用 的 是 具有 多 种 粗细 版 本 的 字体 ， 

法 就 很 有 用 。 


2. 取消 粗 体格 式 
输入 font-weight: 


细 


xw 





normal, 
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Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to 
Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage years, coupled 
with his quiet but firm devotion to the church, made a unique 
foundation for his thoughts and ideas. His search for simplicity, based on 
his careful observations of nature are quite apparent in his work, from 
the Park Guell and its incredible sculptures and mosaics, to the Church 
of the Sacred Family and its organic, bulbous towers. 








La Sagrada Familia 





图 10.4.2. hi 标题 是 以 粗 体 显示 的 ， 而 hz 则 拥有 
常规 的 粗细 。 新 的 链接 被 突出 显示 了 ， 而 访问 过 的 
链接 则 没 那么 显眼 

















由 于 各 种 字体 定义 粗细 的 方式 并 不 相 
同 ， 因 此 预定 义 值 在 不 同 字体 上 的 表现 可 能 

一 致 。 预 定义 值 用 以 表示 某 一 给 定 字 体 下 
的 相对 值 。 


如 果 字 体 的 粗细 少 于 九 种 ， 或 者 这 些 
"^ 中 于 范围 的 一 端 ， 那 么 一 些 数值 就 可 
能 对 应 于 同样 的 粗细 。 


鉴于 上 两 条 提示 ， 添 加 粗 体 样 式 的 通 
行 做 法 是 简单 地 写成 font-weight: bold， 这 
种 方法 总 是 行 之 有 效 的 。 
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哪些 元 素 是 有 可 能 需要 取消 粗 体 的 
呢 ? 这 和 包括 任何 自动 添加 了 粗 体格 式 的 元 素 
(应 该 能 想到 strong, ht ~ h6 feb) , AX 
继承 了 父 元 素 粗 体格 式 的 元 素 (参见 7.3 3). 


在 本 章 接 下 来 的 例子 中 ，h1 和 h2 标 
题 的 font-family 属性 仍 设 为 Arial Black, vm 
不 是 图 10.4.1 ~ 图 10.4.3 中 设置 的 Arial。 不 
过 ， 在 剩余 的 例子 中 ， 仍 将 为 nl 和 hz 标题 
保留 font-weight: normal; 这 一 设置 ， 这 是 
因为 Arial Black 本 来 就 是 一 种 加 粗 字 体 。 如 
TK 为 Arial Black 设置 font-weight: bold;, 

浏览 器 会 试 着 让 它们 变 得 更 粗 ， 显 示 为 一 种 
假 粗 体 。 为 这 些 Arial Black 字体 的 标题 设置 
font-weight: normal;， 这 些 字体 就 会 回 到 自 
然 粗 细 状 态 。 关 于 假 斜体 的 讨论 , 参见 10.3 节 。 


font-weight 属性 是 继承 的 。 





Antoni Gaudí - Introduction - Mozilla Firefox 


Eie Edt View History Bookmarks Tols Help 


| Antoni Gaudi -Introduction 十 | - 
and architecture together —the soaring spires look something like rising £ 


stalagmites in an underground cave—this time in reverance. 








Park Guell 





The Park Guell always reminds me of Howard Roark in Ayn Rand's 
The Fountainhead. Gaudi's project in the Park Guell was to build a 
residential community whose residents would love where they lived. It 


was never finished. 


Perhaps that is for the best, since now we all get to enjoy it. The Park 
Guell is set on a hill overlooking practically all of Barcelona. Its 
beautiful and even comfortable serpentine bench is filled with 
foreigners and locals alike every day of the week. Its mosaic lizard have 


become synonymous with the city itself. 司 





10.4.3 在 页 面 的 底部 , 可 以 看 到 一 个 链接 (The 
Fountainhead ) 和 单词 al1。 它 们 不 仅 根 据 新 设 的 样 
式 规则 而 显示 为 粗 体 ， 而 且 由 于 浏览 需 为 包含 它们 
的 元 素 设 置 的 默认 样式 而 显示 为 斜体 。 它 们 分 别 由 
反映 其 含义 的 cite 和 em 元 素 进行 标记 ( 同时 应 注 
意 到 ，“Park Guell” h2 具有 常规 的 粗细 ， 它 并 不 
是 以 粗 体 显示 的 ) 





















































10.5 ”设置 字体 大 小 


为 网 页 里 的 文本 设置 字体 大 小 有 两 种 方 
X: 直接 指定 要 使 用 的 特定 字号 ( 如 图 10.5.1 
和 图 10.5.2 所 示 ) ， 或 指定 相对 于 父 元 素 文 
本 的 大 小 ( 如 图 10.5.3 所 示 ) 。 








body { 

font-family: "Palatino Linotype", 
Palatino, serif; 

font-size: 14px; 

















} 

hi, 

h2 { 
font-family: "Arial Black", Arial, 
— sans-serif; 
font-weight: normal; /* 对 已 经 加 粗 的 
> Arial Black 取 消 假 粗 体 */ 

) 

h1 { 
font-size: 22px; 

} 

h2 { 
font-size: 15px; 

} 

em, 

a:link, 

a:hover { 
font-weight: bold; 

} 

/* 目录 导航 X 

«toca { 
font-size: 12px; 

} 

10.5.1 这 里 使 用 像素 值 控制 文本 的 初始 字体 大 








小 (我 设置 的 字体 大 小 都 比 大 多 数 浏 览 絮 的 默认 值 
小 一 些 ) 。 段 落 继承 了 body 里 设置 的 font-size. 
结果 如 图 10.5.2 所 示 
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The complicatedly named and curiously unfinished masterpiece that is the Expiato: d ofthe 
Sacred Family is the most v B puldagi is celona. In it, Gaudi com! 
and architecture with his de n to his faith. His focus on this project 


10.5.2. 浏览 器 中 显示 的 是 上 面 指 定 的 字体 大 
小 。 目 录 (在 页 面 顶端 ) 中 的 链接 、 标 题 和 段落 都 
反映 了 样式 表 中 设置 的 font-size 


设置 相对 于 父 元 素 的 字体 大 小 需要 一 点 时 间 
去 习惯 。 你 需要 理解 浏览 器 处 理 这 些 相 对 于 父 
元 素 的 单位 的 方式 , 下 面 花 一 点 时 间 解 释 一 下 。 
不 过 首先 要 说 明 ， 使 用 这 种 方法 时 ， 最 
好 在 body 元 素 上 建立 一 个 基准 ， 即 声明 body 
( font-size: 10096; } (参见 图 10.5.3 ) K 
多 数 时 候 ， 这 项 设置 等 价 于 将 字体 大 小 设 为 
16px， 即 大 多 数 系统 的 默认 字体 大 小 。 照 例 ， 
该 属性 值 传递 至 其 他 的 元 素 (E, font- 
size 属性 是 继承 的 ) ， 除 非 该 元 素 设置 了 它 
自己 的 font-size。 
么 ， 如 何 计算 要 指定 的 em? 值 呢 ? 实 






































WE, lem 就 等 于 默认 的 字号 大 小 (在 这 里 
为 16px ) 。 据 此 可 以 通过 一 点 点 除法 确定 em 


值 poss 5 
指定 的 字体 大 小 / 父 元 素 的 字体 大 小 = 值 
uni 如 果 要 将 hd 设 为 22px， 同 时 已 知 
其 父 元 素 的 字体 大 小 为 16px， 而 
22/16= 1.375 





CD 在 排版 领域 ，em 是 一 种 量度 单位 ， 
于 给 定 字体 环境 下 字母 M 的 宽度 。 





一 一 译 者 注 





body { 
font-family: "Palatino Linotype", 
— Palatino, serif; 





lem 等 于 当前 指定 的 字号 大 小 。 


font-size: 10096; /* 16px */ 
} 
hi, 
h2 ( 
font-family: "Arial Black", Arial, 
— sans-serif; 
font-weight: normal; 
} 
h1 { 
font-size: 1.375em; /* 22px / 16px */ 
} 
h2 { 
font-size: .9375em; /* 15px / 16px */ 
} 
pt 
font-size: .875em; /* 14px / 16px */ 
} 
em, 
a:link, 
a:hover { 
font-weight: bold; 
} 
[* 目录 导航 */ 
.toc a ( 
font-size: .75em; /* 12px / 16px */ 
} 





10.5.3 body 里 的 font-size: 10096 声明 为 em 
字体 大 小 设置 了 参考 的 基准 。 这 里 的 100% 将 被 翻 
译 为 默认 字体 大 小 (大 多 数 系 统 下 为 16px ) 。 这 样 ， 
样式 表 的 结果 同 图 10.5.1 所 示 的 结果 便 是 一 样 的 。 
每 个 font-size 属性 值 后 面 的 注释 解释 了 该 值 的 计 
算 方 法 ， 同 时 显示 了 等 价 的 像素 值 




















因此 ， 设 置 hi{font-size: 1.375em;) 
就 可 以 了 (参见 图 10.5.3) 。 这 条 规则 表示 
“将 hd 文本 的 大 小 设置 为 其 父 元 素 文 本 大 小 


em 这 一 名 称 与 字母 M 有 关 ， 起 初 ，lem 等 
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的 1.375 倍 ”。 另 一 种 方式 是 写成 hl { font- 
size: 137.596; }。 不 过 ,除了 在 body 中 设 
置 基准 font-size 时 使 用 百分数 以 外 ， 设 置 字 
体 大 小 时 使 用 em 比 百分数 更 为 常见 。 

再 如 ， 要 将 段落 文本 设置 为 14px， 而 

14/16 = 0.875 

因此 ,设置 p { font-size: .875em; }( 人参 
见 图 10.5.3) (这 个 值 也 可 以 设 成 87.5% ) 。 
再 讨论 一 个 例子 。 这 可 能 是 你 感到 困 
惑 的 地 方 。 第 一 个 段落 包含 两 个 链接 ( 如 图 
10.5.4 和 图 10.5.5 所 示 ) 。 假 设 要 让 链接 显示 
为 16px， 同 时 让 段落 里 的 其 他 文本 仍 显 示 为 
14px。 你 可 能 打算 将 链接 的 font-size 设 为 
lem， 因 为 lem = 16px。 
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Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 

Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet but firm 

devotion to the church, made a unique foundation for his thoughts and ideas. His search for 

simplicity, based on his careful observations of nature are quite apparent in his work, from the 
and its incredible sculptures and mosaics, to the Church of the Sacred Family and its 

organic, bulbous towers. 


La Sagrada Família 
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The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple of the 
Sacred Family is the most visited building in Barcelona. In it, Gaudí combines his vision of nature zl 
and architecture with his devotion to his faith. His focus on this project was so intense that he 


图 10.5.4 在 大 多 数 系统 中 ， 如 果 使 用 默认 设置 ， 
以 em 为 基础 的 字体 大 小 同 以 像素 为 基础 的 版 本 是 
一 样 的 (参见 图 10.5.2 ) 
































<p>Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet but firm 

— devotion to the church, made a unique foundation for his thoughts and ideas. His search for 

— simplicity, based on his careful observations of nature are quite apparent in his work, from the 
—^«a href-"itpark-guell"»Park Guell«/a» and its incredible sculptures and mosaics, to the Church 
— of the «a href-"itsagrada-familia"»Sacred Family«/a» and its organic, bulbous towers.«/p» 








10.5.5 这 是 HTML 片段 ， 其 中 有 两 个 a26025, WCBEHEACIUAR p 中 

















需要 记 住 的 是 ， 该 值 应 该 是 相对 于 这 些 
元 素 的 父 元 素 的 。 在 这 个 例子 中 ， 它 们 的 父 
元 素 是 p， 而 不 是 body。 段 落 的 字体 大 小 是 
14px， 因 此 ， 要 让 链接 显示 为 16px， 需 要 设 
置 一 个 比 1 大 的 em 值 。 

16/14 = 1.1428457 

因此 ， 使 用 这 个 有 点 宛 长 的 a ( font- 
size: 1.1428457em; ) 将 得 到 想 要 的 结果 。 

最 后 需要 指出 的 是 ， 在 大 多 数 情况 下 ， 
10095 的 body font-size 等 于 16px。 不 过 有 
一 种 例外 的 情况 ， 即 用 户 对 浏览 器 的 设置 覆 
盖 了 该 默认 值 。 例 如 ， 如 果 他 们 是 视 障 人 士 ， 
他 们 可 能 将 默认 字体 大 小 设置 为 20px。 将 
body 设置 为 100%， 页 面 就 会 以 此 为 基准 设置 




















其 余 的 文本 的 相对 大 小 。 这 是 使 用 em 和 百 分 
数 设 置 字体 大 小 的 美 之 所 在 。 


1. 指定 特定 字体 大 小 

(1) 输入 font-size:。 

Q) 在 冒号 (: ) 后 输入 准确 的 字号 ， 如 
13px。 

或 者 使 用 关键 词 指定 字体 大 小 ， 即 使 用 


xx-small, x-small, small, medium, large, 








x-large 或 xx-large, 


D ë * Tama, ATA 节 。 
AD 数字 与 单位 之 间 不 应 有 任何 空格 。 
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如 果 以 像素 为 单位 设置 字体 大 小 ， 使 
用 Internet Explorer 的 访问 者 将 无 法 使 用 浏览 器 
的 文本 大 小 选项 对 文本 进行 放大 或 缩小 。 这 是 
要 用 em 或 百分比 控制 字体 大 小 的 原因 之 一 。 
从 IE7 开始 ， 访 问 者 可 以 对 整个 网 页 放大 或 缩 
小 ， 这 是 对 IE6 的 一 项 改进 ， 因 为 这 不 仅 是 对 
字体 大 小 进行 改变 。 如 果 你 想 知 道 IE6 的 市 场 
份额 ( 它 没有 页 面 缩放 功能 ) ， 可 以 看 到 ， 在 
过 去 的 几 年 里 ， 它 的 份额 已 经 大 大 地 减少 了 ， 
因此 不 少 设计 人 员 和 开发 人 员 已 经 完全 不 考虑 
CT ( 它 还 有 不 少 臭名 昭著 的 错误 ) 。 不 过 ， 
它 在 某 些 国家 仍然 具有 较 大 的 用 户 群 ， 尤 其 是 
中 国 和 韩国 。 要 查看 它 在 世界 各 地 的 份额 ， 可 


以 访问 www.ie6countdown.com. 


GEES 不 同 的 浏览 器 对 关键 词 的 解释 方式 可 
能 有 所 不 同 。 


BR (pt) 只 能 用 做 打印 样式 表 的 单位 ， 
不 能 用 于 屏幕 样式 表 。 


由 于 屏幕 分 辩 率 有 很 大 的 差异 ， 因 此 
要 避免 在 font-size 中 使 用 厘米 、 毫 米 和 十 二 
点 活字 。 实 践 中 很 少 用 到 它们 。 


font-size 属性 是 继承 的 。 

2. 依 父 元 素 设 置 字 体 大 小 

(1) 输入 font-size:。 

(2) 在 冒号 (:) 后 输入 相对 值 ， 如 1.5em 
或 150%。 

或 者 使 用 相对 关键 词 ， 即 使 用 larger 或 
smaller ( 这 种 用 法 没有 百分数 常见 ， 而 百分数 
又 没有 em 常见 ) 。 





1 个 em 单位 (不 要 与 HTML 的 em 
ARAR) 等 于 所 用 字体 的 大 小 ， 因 此 ，lem 
等 于 100%。 


ED 父 元 素 的 字体 大 小 可 能 是 由 用 户 或 设 
计 人 员 设 置 的 ， 可 能 是 继承 的 ， 也 可 能 来 自 浏 
览 器 的 默认 设置 。 上 文 已 经 提 到 ， 大 多 数 浏览 
器 对 body 元 素 设置 的 默认 字体 大 小 为 16 像素。 
设置 了 相对 字体 大 小 的 元 素 的 子 元 素 
会 继承 这 个 大 小 ， 而 不 是 继承 相对 值 。 因 此 , p 
(参见 图 1055) 中 a 元 素 会 继承 14 像 素 的 
字体 大 小 (参见 图 10.5.3) ， 而 不 是 相对 值 
0.875em。 链 接 将 显示 为 14px， 如 果 该 样式 没 
有 被 覆盖 的 话 。 


鲁 国 字体 大 小 可 以 同 其 他 字体 值 一 起 进行 
设置 。 参 见 10.7 节 。 


CSS3 引入 了 一 些 新 的 单位 ， 其 中 很 
有 意思 的 一 个 便 是 rem (root em 的 简称 ) 。 
它 同 em 很 像 不 过 它 总 是 以 根 元 素 为 参照 
系 ， 因 此 不 必 像 使 用 em 时 那样 考虑 父 元 素 
的 字体 大 小 。 现 代 浏 览 器 对 它 的 支持 程度 很 
高 。Internet Explorer 直到 IE9 才 开 始 支 持 它 
( http://caniuse.com/#search=rem ) ， 因 此 需要 
为 IE 的 早期 版 本 提供 默认 值 。Jonathan Snook 
对 如 何 使 用 rem 进行 了 描述 ， 并 提供 了 为 TES 
及 以 下 版 本 准备 的 解决 方案 (http://snook.ca/ 
archives/html and css/font-size-with-rem ) o ( 推 
荐 将 body 字体 大 小 设 为 100%， 而 不 是 该 作 
者 所 用 的 62.5%, 并 据 此 创建 其 他 的 rem 值 。) 


(D 十 二 点 活字 是 印刷 的 专用 单位 ，1 十 二 点 活字 等 于 1/6 英寸 。 一 一 译 者 注 
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此 外 还 有 一 个 单位 ex， 它 指 的 是 父 
元 素 的 Xx 高 度 ， 但 浏览 器 对 它 的 支持 情况 
不 好 。 


10.6 ”设置 行 高 

行 高 指 的 是 段落 的 行距 ， 即 段落 内 每 
行 之 间 的 距离 。 使 用 大 一 些 的 行 高 有 时 候 会 
使 主体 文本 更 容易 阅读 (参见 图 10.6.1 和 
图 10.6.2) 。 对 于 超过 一 行 的 标题 ， 使 用 较 小 
的 行 高 则 会 让 它们 看 起 来 更 美观 。 

















body { 
font-family: "Palatino Linotype", 
— Palatino, serif; 
font-size: 100%; 

j 

h1, 

h2 { 
font-family: "Arial Black", Arial, 
— sans-serif; 
font-weight: normal; 

j 

h1 { 
font-size: 1.375em; 

} 

h2 ( 
font-size: .9375em; 

j 

pt 
font-size: .875em; /* 16px / 14px */ 
line-height: 1.6; 

} 

10.6.1 假设 body 元 素 默认 大 小 为 16 像素 , p 


元 素 的 字体 大 小 为 0.875em， 即 大 约 14 像素 。 T 
高 将 是 14 像素 的 1.6 倍 ， 即 大 约 22.4 像素 
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Antoni Gaudi's incredible buildings bring millior 
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asterpiece that is the Expiatory Temple of the 


The complicatedly named and curiously unfinis 
Sacred Family is the most visited building in B: In it, Gaudi combines his 
and architecture with his devotion to his faith. His focus on this project wassointense that he — 到 


10.6.2 ”使 用 line-height 拉 大 行距 可 以 使 它们 
更 引 人 注 目 ， 并 且 更 容易 阅读 

















设置 行 高 的 步骤 

(1) 输入 line-height: , 

Q) fü An, xx Hi n 是 一 个 数字 ， 它 与 
元 素 的 字体 大 小 相 乘 ， 得 出 需要 的 行 高 。 (这 
是 最 为 常用 的 方法 , 即 一 个 没有 单位 的 数字 。) 

或 者 输入 a， 这 里 的 a 是 以 em、 像 素 或 
磅 ( 仅 在 打印 样式 表 中 使 用 磅 ) 为 单位 的 值 。 

或 者 输入 p%, 这 里 的 p% 是 字体 大 小 的 百分数 。 
辆 国 ”根据 下 一 节 将 要 讲 到 的 ， 行 高 可 以 同 字 
体系 列 、 大 小 、 粗 细 、 字 体 样 式 和 变 体 一 起 进行 


设置 o 





如 果 使 用 数字 设 定 行 高 ， 那 么 所 有 的 
子 元 素 都 会 继承 这 个 因子 。 因 此 ， 如 果 父 元 素 
的 字体 大 小 是 16 像素 (或 以 em 等 表示 的 等 价 
大 小 ) , 行 高 是 1.5, 则 该 元 素 的 行 高 就 是 24( 即 
16x1.5) 像素 。 如 果子 元 素 的 字体 大 小 是 10 像 
素 ， 则 该 元 素 的 行 高 就 是 15 ( 即 10x L5) 像素 。 


如 果 使 用 百分数 或 em 值 ， 那 么 只 会 继 
承 产生 的 行 高 ( 即 计算 出 来 的 值 ) 。 因 此 ， 如 果 
父 元 素 的 字体 大 小 是 16 像素 ， 行 高 是 150%， 则 
该 元 素 的 行 高 就 是 24 像 素 。 所 有 的 子 元 素 都 将 
继承 24 像素 的 行 高 ， 不 管 字体 大 小 是 多 少 。 
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10.7 同时 设置 所 有 字体 值 


可 以 同时 设置 字体 样式 、 粗 细 、 变 体 、 
大 小 、 行 高 和 字体 系列 ( 如 图 10.7.1 所 示 ) 。 
任何 时 候 ， 只 要 可 以 ,都 应 该 采用 这 种 方式 ， 
以 保持 样式 表 的 简洁 。 





body { 
font: 100% "Palatino Linotype", Palatino, 
— serif; 


} 


h1, 

h2 { 
font: 1.375em "Arial Black", Arial, 
— sans-serif; 


} 


h2 { 
font-size: 
} 


pt 
/* 这 些 声明 无 法 使 用 font 简 记 法 ， 除 非 
同时 声明 字体 系列 */ 
font-size: .875em; 
line-height: 1.6; 


.9375em; 


} 


em, 
a:link, 
a:hover { 

font-weight: bold; 
} 


/* Table of Contents navigation */ 
«toca { 


font-size: .75em; 
} 














10.7.1 这 个 样式 表 与 图 10.6.1 中 的 样式 表 是 等 
效 的 ， 其 效果 如 图 10.7.2 所 示 。 这 里 只 是 将 body, 
hi 和 h2 样式 规则 的 font 属性 合并 了 。 注 意 ， 不必 
将 h1 和 pz 的 font-weight 设 为 norzmal， 因 为 normal 
是 font 属性 的 默认 值 。 同 时 ， 这 里 无 法 对 p 元 素 的 
声明 进行 合并 ， 因 为 font 简 记 法 至 少 要 包含 字体 
系列 和 字体 大 小 的 属性 。 关 于 包含 了 font-style, 
font-variant font-weight 和 line-height 的 font 
简 记 法 ， 参 见 第 一 条 提示 中 的 例子 
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Sacred Family is the most visited building in 
and architecture with his devotion to his faith. His foc 





n this ioje ana hii nse tha 


这 个 页 面 与 图 10.6.2 是 相同 的 





图 10.7.2 


同时 设置 所 有 字体 值 的 步骤 

(1) 输入 font: 

人 O) 可 选 步骤 , 输入 nomal, italic s oblique 
以 设置 字 型 (参见 10.3 节 ) 。 

(3) 可 选 步 又, 输入 normal, bold, bolder, 
lighter 或 100 的 倍数 (最 大 到 900 ) 以 设置 
粗细 (参见 10.4 节 ) 。 

(4) 可 选 步骤， 输入 normal 或 small-caps 
来 取消 或 设置 小 型 大 写字 母 (参见 10.15 节 ) 。 

(5) 可 选 步 台 ,输入 需要 的 字体 大 小 ( 参见 
10.57) o 

(6) 如 果 需 要 ， 输 入 /1ine-height， 这 里 的 
line-height 是 行 与 行 之 间 的 距离 ( 参见 10.6 节 )。 

(7) 输入 一 个 空格 ， 再 按 优先 次 序 输入 需 
要 的 字体 系列 ， 以 逗号 分 隔 (参见 10.1 节 ) 。 























E 结合 了 font-size, line-height 和 font- 


family 声明 的 font 简 记 法 的 一 个 例子 是 font : 
.875em/1.6 "Palatino Linotype", Palatino, 
serifj。 行 高 跟 在 字体 大 小 和 一 个 斜 杠 后 面 。. 还 
可 以 包含 font-style, font-variant 和 font- 
weight, 下 面 是 包含 了 所 有 可 能 属性 的 font 声 
8j. font: italic small-caps bold .875em/1.6 
"Palatino Linotype", Palatino, serif; /& 
性 的 顺序 很 重要 。 可 以 使 用 这 些 属 性 的 任意 


组 合 ， 只 要 其 中 声明 了 字体 大 小 和 字体 系列 。 
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ED 可 以 分 别 设置 这 些 属性 ， 但 只 要 有 可 
能 ， 就 应 该 将 它们 合并 到 font 简 记 法 里 。 


头 三 个 属性 可 以 按 任 意 顺序 指定 ， 也 可 
"y 如 果 忽 略 它 们 ,它们 就 被 设 为 normal( 这 
iuga ， 参 见 图 10.7.1。 


字体 大 小 和 字体 系列 属性 必须 始终 显 
yp 先是 字体 大 小 ， 再 是 字体 系列 。 


GNES 行 高 是 可 选 的 ， 但 它 如 果 出 现 ， 就 必 


须 紧 跟 在 字体 大 小 和 斜 杠 后 面 。 
font 属性 是 继承 的 。 


提 ZW 


10.8 设置 颜色 





可 以 修改 网 页 里 元 素 的 颜色 ， 如 图 10.8.1 
和 图 10.8.2 所 示 。 
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© Barcelona's Architect 
* La Sagrada Familia 
* Park Guell 


Barcelona's Architect 
Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 
Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet but firm 


devotion to the church, made a unique foundation for his thoughts and ideas. His search for 
simplicity, based on his careful observations of nature are quite apparent in his work, from the 





Park Guell and its incredible sculptures and mosaics, to the Church of the Sacred Family and its 
La Sagrada Família 


organic, bulbous towers. 
ü e a ne Low g 


The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple of the 
Sacred Family is the most visited building in Barcelona. In it, Gaudi combines his vision of nature 





and architecture with his devotion to his faith. His focus on this project was so intense that he — T 


E 10.8.2 标题 是 深蓝 色 的 ， 文 本 是 浅 紫色 的 。 链 
接 是 深 紫色 的 ,但 在 访问 之 后 会 变 浅 ， 当 鼠标 停留 


时 又 会 变 成 粉 紫色 以 突出 显示 ( 男 见 彩 插 ) 








body { 
color: #909; 
font: 100% "Palatino Linotype", Palatino, 
— serif; 


} 


hi, 

h2 { 
color: navy; 
font: 1.375em "Arial Black", Arial, 
— sans-serif; 


h2 { 


font-size: .9375em; 


font-size: .875em; 
line-height: 1.6; 


em ( 
font-weight: bold; 
} 


/* 链接 */ 
a:link { 
color: #74269d; 
font-weight: bold; 
} 


a:visited ( 
color: #909; 
} 


a:hover { 
color: #c3f; 
font-weight: bold; 
} 


/* 目录 导航 */ 
tocal{ 


font-size: .75em; 
} 





使 














图 10.8.1 可 以 使 


























] 了 第 二 条 提示 里 讲 到 的 简称 








jj 颜色 名 、 十 六 进 制 数 或 
RGB, HSL, RGBA, HSLA 值 定义 颜色 。 注 意 ， 
a:visited 和 a:hover 颜色 ( 分别 为 #909 和 #c3f) 
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设置 颜色 的 步骤 

(1) 输入 color:, 

(2) fj  colorname, iX Hi Hj colorname 是 
预定 义 颜色 中 的 一 种 (参见 74 节 中 的 “CSS 
颜色 ”) 。 

或 者 输入 #rrggbb, iX E H rrggbb Ji BH 
色 的 十 六 进 制 呈现 。 这 是 最 常用 的 指定 颜色 
的 方法 。 

RAMA rgb(r, g, b), 其 中 r+、g、b 是 
0 ~ 255 之 间 的 整数 , 分 别 表示 所 需 颜 色 里 红 、 
绿 、 蓝 的 量 。 

或 者 输入 rgb(r?o, g?o, b%), Rohr. g, 
b 分 别 是 所 需 颜 色 里 红 、 绿 、 蓝 的 百分数 。 

或 者 输入 hsl1(h，s，7)， 其 中 是 0 ~ 
360 之 间 的 数值 ， 表 示 所 需 颜色 的 色相 ; s 和 
了 均 是 百分数 ， 分 别 表 示 所 需 颜色 的 饱和 度 和 
亮度 。 (一般 来 说 ， 对 于 不 透明 颜色 ， 使 用 
十 六 进 制 数 或 RGB 值 更 好 。) 

或 者 输入 rgba(r, g, b, a), EPT, g, 
b 是 0 ~ 255 之 间 的 整数 ， 分 别 表示 所 需 颜色 
里 红 、 绿 、 蓝 的 量 ; a 是 0 ~ 1 之 间 的 小 数 ， 
表示 所 需 颜色 的 alpha 透明 度 。 

或 者 输入 hsla(h, s, 1, a), HP h Æ 
0 ~ 360 之 间 的 数值 ， 表 示 所 需 颜色 的 色相 ; 
5 和 了 均 是 百分数 ， 分 别 表示 所 需 颜 色 的 饱和 
度 和 亮度 ; a 是 0 ~ 1 之 间 的 小 数 ， 表 示 所 需 
颜色 的 alpha 透明 度 。 


ED 


如 果 输 入 的 Tr、g 或 b 的 值 大 于 255， 
就 会 使 用 255。 类 似 地 ， 高 于 100% 的 百分数 
将 被 替换 为 100%。 
































color 属性 是 继承 的 。 


当 十 六 进 制 数值 由 重复 的 数字 组 成 
时 ， 还 可 以 使 用 #7gb 设 置 颜 色 。 事 实 上 ， 
这 是 推荐 的 做 法 。 因 此 ， 可 以 ( 且 应 该 ) 将 
#FF0099 写 做 #F09 或 #f09。 


GED 十 六 进 制 数 不 应 该 用 双 引 号 包围 。 
记 住 ，Internet Explorer 在 IE9 之 前 的 


版 本 不 支持 HSL、RGBA 和 HSLA， 因 此 ， 
如 果 要 在 颜色 声明 中 使 用 这 些 记 法 ， 就 需要 
为 下 的 旧版 本 定义 备用 颜色 。 详 细 说 明 参 见 
7.4 节 中 的 “CSS 颜色 ”。 


10.9 修改 文本 的 背景 


可 以 为 单个 元 素 设 置 背景 ， 或 者 为 整个 
页 面 设 置 背 景 ， 还 可 以 为 上 述 二 者 的 任意 组 
合 设置 背景 (参见 图 10.9.1 和 图 10.9.2) 。 如 
此 ， 便 可 以 对 几 个 段落 、 几 个 单词 、 不 同 状 
态 的 链接 、 内 容 区 域 等 修改 背景 。 

















body { 
background: #eef; 
color: #909; 
font: 100% "Palatino Linotype", Palatino, 
> serif; 
} 
..。 [其 他 CSS] ... 
/* 目录 导航 */ 
.toc { 
background: #ebc6f9; 
} 
.toc a ( 
font-size: .75em; 
} 
10.9.1. Xf body 元素 设置 背景 颜色 就 是 为 整 











个 页 面 设置 背景 颜色 。 对 属于 toc 类 的 元 素 设置 
背景 可 以 让 目录 与 页 面 其 他 内 容 区 分 开 来 (参见 
图 10.9.2 ) 




















修改 文本 背景 的 步骤 

(1) 输入 background: 。 

(2) 输入 transparent ( 透明 ) 或 co7or， 
这 里 的 color 是 颜色 名 称 、 十 六 进 制 数值 ， 











176 $103 文本 的 格式 化 





或 RGB、HSL、RGBA、HSLA 颜色 值 ( 参 
见 10.8 市 )。 十 六 进 制 值 颜色 是 最 为 第 
用 的 。 

(3) 如 果 愿 意 ， 输 入 url(image.gif) 以 使 
用 图 像 作 为 背景 ， 这 里 的 image. gif 是 图 像 相 
对 于 样式 表 所 在 位 置 的 路 径 和 文件 名 。 

如 果 愿 意 ， 输 入 repeat 将 图 像 在 横向 和 
纵向 重复 。 输 入 repeat-x 仅 横 向 重复 ， 或 输入 
repeat-y 仅 纵向 重复 ， 或 者 no-repeat 不 重复 。 

如 果 愿 意 , 输入 fixed( 固定 ) 或 scroll( 滚 
动 ) 以 决定 背景 图 是 否 应 该 随 画布 一 起 滚动 

(通常 不 设置 此 项 ; 如 果 不 设置 ， 则 使 用 默 
认 值 scroll) , 

如 果 愿 意 ， 输 入 xy 以 设置 背景 图像 的 位 
置 ， 其 中 x 和 yy 可 以 表示 为 距离 左上 角 的 绝对 
值 或 百分数 ,或 者 用 left( 左 对 齐 )、center( 居 
中 ) ak right ( 右 对 齐 ) 表示 x， 用 top( 顶 
端 对 齐 )、center( 居中 ) 或 bottom( 底 端 对 齐 ) 
表示 yo 
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Barcelona's Architect 
Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet but firm 
devotion to the church, made a unique foundation for his thoughts and ideas. His search for 
simplicity, based on his careful observations of nature are quite apparent in his work, from the 
Park Guell and its incredible sculptures and mosaics, to the Church of the Sacred Family and its 
organic, bulbous towers. 
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The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple of the 
Sacred Family is the most visited building in Barcelona. In it, Gaudi combines his vision of nature 





E 


and architecture with his devotion to his faith, His focus on this project was so intense that he 





10.9.2 body 元 素 的 背景 是 浅 蓝 色 的 ， 目 录 的 
背景 则 是 浅 紫 色 的 ( 男 见 彩 插 ) 


CES 可 以 同时 指定 背景 颜色 和 背景 图 像 的 
URL。 在 图 像 尚未 加 载 前 ， 或 出 于 某 种 原因 
未 能 加 载 时 ， 就 会 使 用 这 个 颜色 ， 并 且 会 在 
图 像 的 透明 部 分 露出 这 个 颜色 。 如 果 为 元 素 
定义 了 背景 图 像 ， 通 常 一 种 好 的 做 法 是 同时 
为 其 定义 背景 颜色 ， 这 种 颜色 要 让 文字 颜色 
和 背景 具有 足够 的 对 比 度 。 这 样 做 就 能 确保 
在 背景 图 像 被 用 户 关 闭 或 因为 菜 种 原因 未 能 
加 载 时 文字 依然 具有 可 读 性 。 如 果 不 显 式 地 
定义 背景 颜色 ， 该 元 素 就 会 继承 其 父 元 素 的 
颜色 ， 如 body 元 素 默 认 的 白色 背景 。 如 果 你 
想 在 深 色 背景 图 像 上 显示 浅 色 文字 ， 就 有 可 
能 产生 问题 。 更 多 细节 参见 “更 多 关于 背景 
的 说 明 ”。 


UE 背景 和 前 景 之 间 应 有 足够 的 对 比 度 ， 
从 而 让 访问 者 能 够 轻松 地 阅读 文字 。 这 样 做 
不 仅 能 帮助 普通 用 户 ， 而 且 对 可 访问 性 来 说 
也 是 很 重要 的 。 对 比 度 对 色 育 访问 者 来 说 万 
其 重要 。 


background 属性 不 是 继承 的 。 


多 重 背 景 及 更 多 的 CSS3 特性 

CSS3 引入 了 几 个 新 的 背景 相关 的 特 
性 ,包括 期 待 已 久 的 多 重 背 景 、 背 景 缩 放 等 。 
其 中 的 一 些 可 以 在 第 14 章 学 到 。 如 果 要 深 
入 了 解 相关 CSS3 模块 中 的 所 有 这 些 特征 ， 
参见 www.w3.org/TR/css3-background/o 
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更 多 关于 背景 的 说 明 

background 属性 非常 强大 ， 你 会 发 现 很 多 需要 用 上 它 的 场合 。 容 易 想到 的 是 你 可 能 对 本 
节 中 的 第 (3) 步 仍 有 些许 疑 芒 。 

下 面 是 一 个 例子 : 

body { 


background: #foc url(bg-page.png) repeat-x scroll 0 0; 
} 


这 实际 上 是 一 种 简 记 法 ， 就 像 使 用 font 属性 将 font-family, font-size, line-height 
等 属性 组 合 在 一 条 声明 里 一 样 。 
从 左 至 右 对 background 简 记 法 进行 分 解 ， 可 以 重新 写 为 : 
body { 

background-color: #foc; 
background-image: url(bg-page.png); 
background-repeat: repeat-x; 
background-attachment: scroll; 


background-position: O 0; 
} 
这 样 做 代码 量 就 变 大 了 , 因此 ,很 容易 理解 为 什么 应 该 使 用 简 记 法 , 除非 有 理由 分 开 书写 。 
实际 上 ， 甚 至 还 可 以 将 scroll 和 0 0 去 掉 ， 让 示例 变 得 更 短 一 些 。 
body { 
background: #foc url(bg-page.png) repeat-x; 
} 
ZRP, URL 可 能 是 类 似 于 ../img/bg-page.png 的 形式 ， 因 为 我 们 通常 不 希望 将 图 像 与 
样式 表 保 存在 同一 目录 。 
那么 ， 这 代表 什么 呢 ? 设想 背景 图 像 bg-page.png 是 一 个 15 像素 宽 、600 像素 高 的 重复 
图 案 。 示 例 样式 规则 表示 : “在 水 平方 向 无 限 重复 这 个 图 像 ， 在 任何 没有 图 像 的 地 方 无 限 使 
用 #foc 颜色 。” 这 样 ， 就 会 看 见 图 像 在 纵向 前 600 像素 的 区 域 平 铺 开 来 。 如 果 内 容 的 高 度 大 
于 600 像素 ， 就 会 看 见 #foc 颜色 ( 粉红 色 ， 很 适合 用 于 Hello Kitty 礼品 站 ) 。 
背景 图 像 应 该 很 好 地 与 背景 颜色 融合 ， 以 免 访问 者 在 图 像 与 颜色 交接 处 看 到 一 条 明显 的 
Ro H F background 是 为 body 定义 的 ,因此 所 有 的 页 面 内 容 都 覆盖 在 背景 图 像 与 背景 颜色 上 。 
NEU n 很 容易 发 现 为 body 设置 的 background 的 一 些 变化 。 
面 给 出 了 更 多 的 例子 ， 介 绍 了 一 些 可 能 的 处 理 方式 。 
EA ue 背景 颜色 ， 结 合 在 纵向 上 无 限 重 复 显 示 的 图 像 。 
body { 


background: #000 url(../../image/bg-page.png) repeat-y; 
} 
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在 所 有 方向 无 限 重复 显示 的 背景 图 像 。 在 图 像 未 能 加 载 时 ,或 在 图 像 加 载 之 前 , 显示 黄色 。 


body { 
background: yellow url(../img/bg-smiley-faces.png); 


) 
深 绿色 的 背景 颜色 ， 结 合 不 重复 显示 且 定 位 于 距 页 面 左边 缘 200 像素 、 距 上 边缘 125 像 
素 的 图 像 。 允 许 使 用 负数 。 使 用 center 可 以 让 它 相对 页 面 居 中 。 
body { 
background: #3f8916 url(../../img/bg-gumby.png) no-repeat 200px 125px; 
} 
上 面 的 介绍 集中 于 body 背景 ， 这 是 因为 它们 对 页 面 的 设计 有 着 极 大 的 影响 。 实 际 上 ， 可 
以 将 background 属性 应 用 于 任何 元 素 。 因 此 ， 如 果 你 愿意 ， 完 全 可 以 将 Telly Savalas 的 照片 
设 为 所 有 段落 的 背景 。 我 鼓励 你 这 样 做 。 
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可 以 增加 或 减少 单词 之 间或 字母 之 间 的 距 Pee 
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离 (参见 图 10.10.1 和 图 10.102) 。 前 者 称 为 UE 
字 间 距 ( tracking ) , 后 者 称 为 字 偶 距 (kerming ) 。 Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 





























bod Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet 
0 but firm devotion to the church, made a unique foundation for his thoughts and 
y i k d: # f: ideas. His search for simplicity, based on his sr observations of Bo are quite 
n zo eet; apparent in his work, from the Park Guell and its incredible sculptures and mosaics, 
coor: 5 to the Church of the Sacred Family and its organic, bulbous towers. 
font: ~ "Palatino Linotype", Palatino, Da sagrada FAMA 
> serif; 
} 图 10.10.2 现在 ,标题 中 字母 之 间 的 距离 变 大 了 
hi, 
h2 ( bhai 
B 
color: navy; 1. 指定 字 间 中 
font: 1.375em "Arial Black", Arial, Wd] 入 word-spacing: length, ix 里 的 
> sans-serif; Ei pum p 2> x 
letter-spacing: .4em; length 是 一 个 带 单 位 的 数字 ， 如 0.4em 或 
} 5pX。 
h2 ( E na 
font-size: .9375em; 2. 18 XESE AB EE 
} t A letter-spacing: length, ix Hn 
s [其余 的 CSS] ... length 是 一 个 带 单位 的 数字 ， 如 0.4em 或 
I ; 5px. 
图 10.10.1 这 里 为 标题 字母 添加 了 0.4em 的 额外 








间距 。 在 字体 大 小 为 22 像素 的 情况 下 ， 这 意味 着 CNES 可 以 对 单词 间距 和 字母 间距 使 用 负数 。 
单词 之 间 的 距离 几乎 有 9 像素 (参见 图 10.10.2 ) 一， 
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单词 间距 和 字母 间距 的 值 还 可 能 受到 
所 选 的 对 齐 方式 和 字体 系列 的 影响 。 


时 团委 将 字母 间距 和 单词 间距 设 为 默认 值 
( 即 不 添加 额外 的 间距 ) ， 可 以 使 用 normal 
或 0。 


如 果 要 使 用 em 值 ， 那 么 只 有 产生 的 


CES 

大 小 ( 即 “计算 出 来 的 值 ”) 会 被 继承 。 因 此 ， 
如 果 父 元 素 字 体 大 小 为 16 像素 ， 人 额外 的 单词 
间距 为 0.1em， 则 每 个 单词 之 间 的 额外 间距 为 
1.6 像 素 。 同 时 ， 所 有 子 元 素 每 个 单词 之 间 也 
有 1.6 像 素 的 额外 间距 ， 不 管 它们 的 字体 大 小 
是 多 少 。 如 果 要 覆盖 继承 的 值 ， 可 以 显 式 地 
为 子 元 素 设 置 间距 。 


word-spacing 和 letter-spacing 属性 
是 继 承 的 o 


10.11 增加 缩 进 


通过 设置 text-indent 属性 ， 可 以 指定 
段落 第 一 行 前 面 应 该 空 出 多 大 的 空间 ， 如 图 
10.11.1 和 图 10.11.2 所 示 。 


增加 缩 进 的 方法 

输入 text-indent: length， 这 里 的 length 
是 一 个 带 单 位 的 数字 ， 如 1.5em 或 18px。 
CNES 使 用 负数 会 产生 是 挂 缩 进 。 使 用 悬挂 
缩 进 时 ， 可 能 还 需要 增加 文字 框 周转 的 内 边 
距 或 外 边 距 ， 从 而 让 容器 可 容纳 伸 到 外 边 的 
文本 。 (参见 11.8 节 和 119 35, ) 








与 通常 情况 一 样 ，em 值 要 根据 元 素 
的 字体 大 小 进行 计算 ， 百分数 要 根据 父 元 素 
的 宽度 进行 计算 。 


text-indent 属性 是 继承 的 。 





pody { 
background: #eef; 
color: #909; 
font: 100% "Palatino Linotype", Palatino, 


> serif; 
} 
hi, 
h2 1 
color: navy; 
font: 1.375em "Arial Black", Arial, 
— sans-serif; 
letter-spacing: .4em; 
} 
h2 { 
font-size: .9375em; 
} 
pt 


font-size: .875em; 
line-height: 1.6; 
text-indent: 1.5em; 








} 
..。 [其余 的 CSS] ... 





10.11.1 这 段 代码 为 p 元素 添加 了 1.5em 的 缩 
进 。 由 于 字体 大 小 约 为 14 像素 ， 因 此 这 个 缩 进 约 
为 21 像素 (参见 图 10.11.2 ) 


Antoni Gaudi- Introduction - Mozilla Firefox ioj xl 


File Edt View History Bookmarks Tools Help 
| [E Antoni Gaudi - Introduction E 








Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona 
each year, 


Gaudí's non-conformity, already visible in his teenage years, coupled with his 
quiet but firm devotion to the church, made a unique foundation for his thoughts 
and ideas. His search for simplicity, based on his careful observations of nature are 
quite apparent in his work, from the Park Guell and its incredible sculptures and 
mosaics, to the Church of the Sacred Family and its organic, bulbous towers. 
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10.11.2 ”每 个 段落 都 有 21 像素 的 缩 进 
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如 果 要 使 用 百分数 或 em 值 ， 那 么 只 


有 生成 的 大 小 ( 即 “ 计 算出 来 的 值 ”) 会 被 继承 。 
因此 ， 如 果 父 元 素 为 300 像素 宽 ， 那么 10% 
的 text-indent 就 是 30 像素 ， 同 时 ， 所 有 子 
元 素 第 一 行 也 都 会 缩 进 30 像素 ,而 不 管 它们 
各 自 父 元 素 的 宽度 是 多 少 。 


要 去 除 继承 的 缩 进 ， 使 用 0 即 可 。 


10.12 ”设置 空白 属性 


默认 情况 下 ，HTML 文档 里 的 多 个 空格 
和 回 车 会 显示 为 一 个 空格 ， 或 者 被 忽略 。 如 
果 要 让 浏览 器 显示 这 些 额 外 的 空格 ， 可 以 使 
用 white-space 属性 。 





设置 空白 属性 的 步骤 

(1) 输入 white-space:; 

(2) 输入 prfe， 以 让 浏览 需 显 示 原 文本 中 
所 有 的 空格 和 回 车 ; 

或 者 输入 nowrap， 以 使 所 有 空格 成 为 非 
断 行 空格 ; 

或 者 输入 normal， 以 按 正 常 方式 处 理 
空格 。 

10.12.1 和 图 10.12.2 演示 了 如 何 对 第 一 个 
段落 应 用 nowrap 值 。 可 以 看 到 ， 这 样 做 ， 该 
段落 就 不 会 自动 换行 了 (参见 图 10.12.3 ) 。 
不 过 ， 我 们 并 非 真 的 希望 为 页 面 添加 这 种 效 
果 ， 因 此 在 接 下 来 的 例子 中 ， 这 个 class 及 相 
关 的 CSS 将 被 移 除 。 


white-space 属性 的 pre 值 的 名 称 来 
源 于 pre 元素 ， 该 元 素 以 等 宽 字 体 显 示 其 包 
含 的 文本 ， 并 保留 所 有 的 空格 和 回 车 。pre 元 
素 的 名 称 来 自 单词 pre-formatted ( 预 格式 化 ) 。 
关于 pre 的 更 多 信息 ， 参 见 第 4 章 。 











body { 
background: #eef; 
color: #909; 
font: 100% "Palatino Linotype", Palatino, 
— serif; 

} 

hi, 

h2 ( 
color: navy; 
font: 1.375em "Arial Black", Arial, 
— sans-serif; 
letter-spacing: .4em; 

} 

h2 { 
font-size: .9375em; 

} 

p { 
font-size: .875em; 
line-height: 1.6; 
text-indent: 1.5em; 

} 

.intro { 
white-space: nowrap; 

} 

..。[ 其 余 的 CSS] ... 











10.12.1 将 white-space 的 值 设 为 nowrap， 空 
格 将 作为 非 断 行 空格 进行 处 理 





«hi id-"gaudi"»Barcelona's Architect«/hi» 


«p class-"intro"»Antoni Gaudi's 
— incredible buildings bring millions of 
— tourists to Barcelona each year.«/p» 


«p»Gaudi's non-conformity, already 

— visible in his teenage years, coupled 
— with his quiet but firm devotion to 
— the church, made a unique foundation 
— for his thoughts and ideas...«/p» 














10.12.2 ”仅仅 出 于 显示 目的 ， 为 第 一 个 段落 添 
加 了 intro 类 ， 从 而 可 以 看 到 nowrap 对 第 一 段 显 
示 的 影响 
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Barcelona's Architect 


Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each y 


Gaudi's non-conformity, already visible in his teenage years, coupled with his 
quiet but firm devotion to the church, made a unique foundation for his thoughts 
and ideas. His search for simplicity, based on his careful observations of nature are 
quite apparent in his work, from the Park Guell and its incredible sculptures and 
mosaics, to the Church of the Sacred Family and its organic, bulbous towers. 
La Sagrada Família 
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图 10.12.3 ”第 一 个 段落 不 会 换行 ， 即 便 浏 览 器 窗口 
太 窗 ， 不 足以 显示 整 行 ， 这 样 就 会 出 现 横 向 滚动 条 





ED 注意 ， 将 white-space 属性 的 值 设 为 


pre 不 会 影响 元 素 的 字体 (这 与 pre 元 素 不 一 
样 ， 浏 览 器 默认 会 以 等 宽 字 体 显示 其 包含 的 
文本 ) 。 


在 具有 white-space: nowrap 样式 的 
see 可 以 使 用 br 元 素 手 动 创 建 换行 。 尽 
管 如 此 ， 还 是 要 尽量 避免 使 用 br， 除 非 没 有 
更 好 的 选择 ， 因 为 这 样 做 会 在 HIML 中 混合 
表现 ， 而 不 是 让 CSS 控制 它 。 关 于 br 元 素 的 
更 多 信息 参见 4.16 节 


10.13 ”对 齐 文本 


根据 需要 ， 可 以 让 文本 左 对 齐 、 右 对 
齐 、 居 中 对 齐 或 两 端 对 齐 ( 参见 图 10.13.1 和 
图 10.13.2) 。 


对 齐 文 本 的 步骤 

(1) 输入 text-align:; 

(2) 输入 left 让 文本 左 对 齐 ; 

或 者 输入 right 让 文本 右 对 齐 ; 
或 者 输入 center 让 文本 居于 屏幕 的 中 间 ; 
或 者 输入 justify 让 文本 两 端 对 齐 。 





body { 
background: #eef; 
color: #909; 
font: 100% "Palatino Linotype", Palatino, 
> serif; 


color: navy; 

font: 1.375em "Arial Black", Arial, 
— sans-serif; 

letter-spacing: .4em; 

text-align: center; 


h2 { 
} 
pt 


font-size: .9375em; 


font-size: .875em; 
line-height: 1.6; 
text-align: justify; 
text-indent: 1.5em; 








. [其余 的 CSS] ... 





图 10.13.1 做 出 以 下 更 改 以 后 ， 标 题 和 段落 文本 
的 对 齐 方式 就 会 相应 调整 。 不 要 忘记 text-align 
中 的 连 字符 ( - ) 
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Barcelona's Architect 
Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet but firm 
devotion to the church, made a unique foundation for his thoughts and ideas. His search for 
simplicity, based on his careful observations of nature are quite apparent in his work, from the 
Park Guell and its incredible sculptures and mosaics, to the Church of the Sacred Family and its 
organic, bulbous towers. 
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The complicatedly named and curiously unfinished masterpiece that is the Expiatory Temple of 
the Sacred Family is the most visited building in Barcelona. In it, Gaudi combines his vision of 








nature and architecture with his devotion to his faith. His focus on this project was so intense 


图 10.13.2 ”做 出 更 改 以 后 ， 标 题 变 成 居中 对 齐 ， 
段落 文本 变 成 两 端 对 齐 
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国 国 ”如果 选择 让 文本 两 端 对 齐 ， 要 注意 单 
词 间距 和 字母 间距 有 可 能 受到 严重 的 影响 。 
更 多 信息 参见 10.10 节 。 


注意 ，text-align 属性 只 能 用 于 设 
为 display: block 或 display: inline-block 
的 元 素 。p 和 div 等 元 素 已 默认 设 为 display: 
block。 在 HTMLS 之 前 ， 这 类 元 素 称 为 块 级 
元 素 。 它 们 的 默认 设置 在 HIMLS 中 被 保留 
了 ， 但 它们 已 不 再 称 为 块 级 元 素 了 ， 以 免 将 
HTML 语义 与 外 观 等 同 。 因 此 这 一 点 主要 适 
用 于 短语 内 容 (在 HTML5 之 前 称 为 “行内 ” 
元 素 ) ， 如 strong、em、a、cite 等 出 现在 句 
子 、 标 题 上 下 文中 的 元 素 。 如 果 要 对 这 些 元 素 
单独 设置 对 齐 方式 ， 而 不 是 与 包围 它们 的 文 
本 一 同 设置 ， 必 须 先 履 盖 它们 默认 的 display: 
inline 样式 ， 设 置 display: block 或 display: 
inline-block， 再 设置 相应 的 text-align。 对 
F display: inline-block 的 元 素 ， 可 能 需要 
设置 一 个 宽度 才能 看 见效 果 。 事 实 上 ， 需 要 为 

“行内 ”元 素 设置 text-align 的 情形 是 非常 少 
见 的 。 


text-align 属性 是 继承 的 。 它 的 默 
认 值 取决 于 文档 的 语言 和 书写 系统 ， 不 过 在 
大 多 数 情况 下 ， 它 会 被 不 加 区 分 地 设置 为 左 
对 齐 。 


10.14 ”修改 文本 的 大 小 写 


使 用 text-transform 属性 ， 可 以 为 样式 
定义 文本 的 大 小 写 (参见 图 10.14.1 ) 。 通 过 
这 种 方法 ， 可 以 将 文本 显示 为 首 字母 大 写 、 
全 部 大 写 (参见 图 10.14.2 ) 、 全 部 小 写 或 按 
原样 显示 。 











body { 
background: #eef; 
color: #909; 
font: 100% "Palatino Linotype", Palatino, 


 serif; 
} 
hi, 
h2 { 
color: navy; 
font: 1.375em "Arial Black", Arial, 
— sans-serif; 
letter-spacing: .4em; 
text-align: center; 
} 
h1 { 
text-transform: uppercase; 
} 
h2 { 
font-size: .9375em; 
} 


e. [其 余 的 CSS] ... 











图 10.14.1 将 一 级 标题 显示 为 全 部 大 写 ， 以 便 突 
出 它 〈 代 码 实 现 参见 图 10.14.2 ) 
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BARCELONA'S ARCHITECT 
Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 


Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet but 
firm devotion to the church, made à unique foundation for his thoughts and ideas. His 
search for simplicity, based on his careful observations of nature are quite apparent in his 
work, from the Park Guell and its incredible sculptures and mosaics, to the Church of the 
Sacred Family and its organic, bulbous towers. 


图 10.14.2 ”现在 ,标题 真 的 很 醒目 


修改 文本 大 小 写 的 步骤 

(1) 输入 text-transform: 

(2) 在 冒号 ( : ) 后 输入 capitalize 让 每 个 
单词 的 首 字 母 大 写 ; 

或 者 输入 uppercase 让 所 有 字母 大 写 ; 

或 者 输入 lowercase 让 所 有 字母 小 写 ; 
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或 者 输入 none 让 文本 保持 本 来 的 样子 ( 可 
以 用 来 取消 继承 的 值 ) 。 


capitalize 属性 值 有 它 的 局 限 性 。 
它 并 不 了 解 一 门 语言 里 按照 惯例 首 字母 不 
应 该 大 写 的 单词 ， 它 只 是 简单 地 让 每 个 单 
词 首 字母 大 写 。 因 此 ，HTML 中 的 文本 Jim 
Rice enters the Hall of Fame 将 显示 为 Jim Rice 
Enters The Hall Of Fame, 





既然 可 以 改变 HIML 里 的 文本 ， 为 
什么 还 要 用 text-transform 呢 ? 这 是 因为 ， 
有 上 时， 内容 是 你 无 法 控制 的 。 例 如 ， 内 容 可 
能 存储 在 数据 库 里 ， 或 者 来 自 另 一 个 网 站 的 
新 闻 源 。 在 这 些 情况 下 ， 只 能 通过 CSS 控制 
文本 的 大 小 写 。 此外, 如 果 要 让 文本 全 部 大 写 ， 
大 多 数 时 候 应 使 用 text-transform: uppercase。 
搜索 引擎 通常 是 按 它 在 HTML 里 输入 的 样子 
索引 的 ， 在 搜索 结果 里 显示 标准 的 大 小 写 会 
更 容易 阅读 。 


lowercase 属性 值 可 以 用 来 创建 特殊 
的 标题 样式 ( 就 像 诗 人 e.e. cummings” ) 。 


text-transform 属性 是 继承 的 。 


10.45 ”使 用 小 型 大 写字 母 


很 多 字体 都 有 对 应 的 小 型 大 写字 母 变 
体 ， 其 中 一 些 字 母 是 大 写 的 ， 但 缩小 到 了 
小 写字 母 的 大 小 。 可 以 使 用 font-variant 
调用 小 型 大 写字 母 变 体 (参见 图 10.15.1 和 
图 10.15.2 ) 。 




















(D 美国 诗人 E. E. Cummings 的 一 些 作 品 全 部 使 用 小 写字 母 ， 署 名 也 写 做 e.e. cummings。 





body { 
background: #eef; 
color: #909; 
font: 100% "Palatino Linotype", Palatino, 
> serif; 
} 
hi, 
h2 1 
color: navy; 
font: 1.375em "Arial Black", Arial, 
— sans-serif; 
letter-spacing: .4em; 
text-align: center; 
} 
h1 { 
text-transform: uppercase; 
} 
h2 { 
font-size: 1.15em; 
font-variant: small-caps; 
} 
es [其余 的 CSS] ... 











10.15.1 这 里 为 h2 设置 了 smal1-caps， 并 将 其 字 
体 大 小 增加 了 一 些 ， 从 而 让 它 与 hi 在 比例 上 更 加 
协调 (参见 图 10.15.2 ) 。 不 要 忘记 font-variant 
和 small-caps 中 的 连 字 符 ( - ) 
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Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year. 

Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet but firm 
devotion to the church, made a unique foundation for his thoughts and ideas, His search for 
simplicity, based on his careful observations of nature are quite apparent in his work, from the 
Park Guell and its incredible sculptures and mosaics, to the Church of the Sacred Family and its 
organic, bulbous towers. 


LA SAGRADA FAMÍLIA 


Tu E y. 


图 10.15.2 ”现在 可 以 看 到 h2 中 每 个 字母 的 小 型 大 
写 版 本 。 小 型 大 写字 母 在 不 同 浏览 器 中 的 显示 效果 
稍 有 不 同 














译 者 注 
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1. 使 用 小 型 大 写字 母 的 方法 


输入 font-variant: small-caps, 


2. 取消 小 型 大 写字 母 的 方法 


输入 font-variant: none, 


与 简单 地 缩小 字号 的 大 写字 母 相 比 ， 
小 型 大 写字 母 显 得 更 为 轻巧。 


CED 并非 所 有 的 字体 都 有 对 应 的 小 型 大 写 
字母 设计 。 如 果 浏 览 器 没有 找到 这 种 设计 ， 
那么 它 有 几 种 选择 : 可 以 简单 地 缩小 大 写字 
母 的 尺寸 来 模拟 小 型 大 写字 母 ( 这 会 使 它们 
LAUR RARE), ， 也 可 以 完全 忽略 小 型 大 写 
字母 ， 并 将 它们 显示 为 全 部 大 写 (就 像 前 面 
描述 的 text-transform: uppercase 那样 ) ， 
理论 上 还 可 以 选择 字体 列表 中 的 下 一 个 字体 ， 
看 它 有 没有 小 型 大 写字 母 设计 (现实 中 我 从 
未 见 过 这 样 处 理 的 ) 。 

提 示 | 


font-variant 属性 是 继承 的 。 


10.16 ”装饰 文本 


可 以 使 用 样式 表 对 文本 进行 装饰 ， 如 添 
加 下 划 线 和 删除 线 ( 可 能 用 来 表示 修改 ) ， 
参见 图 10.16.1 和 图 10.16.2。 














body { 
background: #eef; 
color: #909; 
font: 100% "Palatino Linotype", Palatino, 
> serif; 


} 


h1, 

h2 { 
color: navy; 
font: 1.375em "Arial Black", Arial, 
—> sans-serif; 


( 续 左 栏 代码 ) 

















letter-spacing: .4em; 





text-align: center; 
} 
h1 { 
text-transform: uppercase; 
} 
h2 { 
font-size: 1.15em; 
font-variant: small-caps; 
} 
pt 
font-size: .875em; 
line-height: 1.6; 
text-align: justify; 
text-indent: 1.5em; 
} 
em ( 
font-weight: bold; 
} 
/* 链接 */ 
a:link { 
color: #74269d; 
font-weight: bold; 
text-decoration: none; 
} 
a:visited ( 
color: #909; 
text-decoration: none; 
} 
a:hover { 
color: #c3f; 
font-weight: bold; 
text-decoration: underline; 
} 
/* 目录 导航 X 
toc ( 
background: #ebc6f9; 
} 
«toca ( 
font-size: .75em; 
} 








图 10.16.1 这 是 图 10.16.2 显示 的 整个 页 面 的 样式 
表 , 包括 改变 链接 样式 的 text-decoration。 不 过 ， 
下 划 线 等 文本 装饰 并 不 限于 a 元素， 它们 还 可 以 应 
用 于 其 他 元 素 
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Antoni Gaudi's incredible buildings bring millions of tourists to Barcelona each year, 


Gaudi's non-conformity, already visible in his teenage years, coupled with his quiet but 
firm devotion to the church, made a unique foundation for his thoughts and ideas, His 
search for simplicity, based on his careful observations of nature are quite apparent in his 
work, from the Park Guell and its incredible sculptures and mosaics, to the Church of the 
Sacred Family and its organic, bulbous towers. 
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10.16.2 在 最 上 面 的 图 中 ， 可 以 看 到 所 有 链接 
( 包括 目录 中 的 链接 ) 的 下 划 线 都 被 移 除了 。 页 面 
下 方 有 另外 一 个 链接 ， 它 以 斜体 显示 ， 它 是 一 本 书 
的 书 名 ， 因 此 笔者 使 用 了 位 于 链接 里 的 cite 元 素 
标记 (cite 元 素 的 默认 样式 为 斜体 ) 。 最 下 面 的 
图 显示 了 鼠标 停留 时 链接 的 下 划 线 样式 ， 它 们 提醒 
访问 者 可 以 进一步 采取 行动 。 本 章 前 面部 分 已 经 将 
a:hover 的 颜色 设 为 #c3f 

















1. 装饰 文本 的 步骤 

(1) 输入 text-decoration:, 

(2) 在 冒号 ( : ) 后 输入 underline 以 添加 
下 划 线 ; 

或 者 输入 overline 以 添加 上 划 线 ; 

或 者 输入 line-through 以 添加 删除 线 。 


2. 取消 文本 装饰 的 方法 


输入 text-decoration: none;. 


对 于 正常 情况 下 有 装饰 的 元 素 ( 如 a、 
del, ins) 以 及 从 父 元 素 继 承 了 装饰 样式 的 元 
素 ， 可 以 取消 它们 的 装饰 。 


将 链接 的 下 划 线 去 掉 固然 很 好 ， 但 是 
必须 用 别 的 方式 将 链接 与 周围 的 内 容 进行 区 
分 ， 否 则 访问 者 就 无 法 知道 它们 是 可 激活 的 
链接 。 





第 11 章 


用 CSS 进行 布局 








本 章 内 容 

口 开始 布局 注意 事项 

口 建立 页 面 结构 

口 在 旧版 浏览 需 上 为 HTMLS 元 素 添 加 
样式 

口 对 默认 样式 进行 重 置 或 标准 化 
a 盒 模型 

口 修改 背景 

口 设置 元 素 的 高 度 和 宽度 
口 设置 元 素 周 围 的 外 边 距 
口 在 元 素 周 围 添加 内 边 距 
口 使 元 素 浮动 

口 控制 元 素 浮 动 的 位 置 
口 设置 边框 

口 偏 移 自然 流 中 的 元 素 
口 对 元 素 进 行 绝 对 定位 
O 指定 元 素 的 三 维 位 置 
口 决定 溢出 的 位 置 

口 垂直 对 齐 元素 

口 修改 鼠标 指针 

口 显示 和 隐藏 元 素 

















可 以 使 用 CSS 创建 各 种 各 样 的 布局 。 本 
章 将 演示 如 何 创 建 一 种 常见 的 布局 : 顶部 有 
一 个 报头 ， 中 间 是 两 栏 内 容 ， 底 部 有 一 个 页 
脚 ， 如 图 11.0.1 所 示 。 不 过 ， 使 用 即将 讲 到 
的 CSS 属性 ， 还 可 以 创建 截然 不 同 的 布局 。 
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11.0.1 


这 个 页 面包 含 两 个 流 式 栏 、 一 个 页 眉 和 
一 个 页 脚 ， 它 是 用 CSS 进行 布局 的 。 本 章 将 逐步 


讲解 这 个 页 面 的 布局 ( 男 见 彩 插 ) 


在 本 章 中 ， 不 会 将 CSS 的 每 一 行 都 显示 
出 来 。 例 如 ， 大 部 分 文本 格式 化 都 在 前 面 完 
成 了 。 完 整 的 代码 见 www.bruceontheloose. 
com/htmless/examples/chapter-1 1/finished-page. 
html. 我 还 创建 了 一 个 定 宽 ( 非 流 式 ) 版 本 ( 文 
件 名 为 finished-page-fixed-width.html ) ， 以 演 
示 如 何 实现 定 宽 布局 。 所 有 这 些 文件 ( 尤其 
是 样式 表 ) 中 都 包含 了 大 量 的 注释 ， 用 以 对 
代码 进行 解释 。 


开始 布局 注意 事项 
一 些 要 点 有 助 于 对 网 站 进行 























11.1 
下 面 列举 的 
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布局 ， 并 在 发 布 之 前 对 网 站 进行 调整 。 


1. 内 容 与 显示 分 离 

口 作为 最 住 实践 ,应 始终 保持 内 容 ( HTML ) 
与 显示 (CSS) 分 离 。 第 8 章 介绍 了 如 
何 通过 外 部 样式 表 实 现 这 一 点 。 如 果 对 
所 有 的 页 面 都 这 样 做 ， 就 可 以 共享 相同 
的 布局 和 整体 样式 。 这 也 让 日 后 修改 整 
个 网 站 的 设计 变 得 更 加 容易 一 一 只 修改 
CSS 文件 就 可 以 了 。 3. 布局 方法 

有 几 种 布局 的 方式 。 

口 对 于 固定 (fixed) 布局 ， 整 个 页 面 和 


单独 样式 表 中 的 下 补丁 。 

我 在 本 书 网 站 的 代码 示例 中 提供 了 
这 两 种 技术 的 例子 。 第 一 种 方法 位 
于 finished-page.html ( 参见 本 章 导 
语 ) ， 第 二 种 方法 位 于 同一 目录 下 的 
finished-page-conditional-stylesheets. 
html。 关 于 条 件 注释 ， 参 见 www. 
quirksmode.org/css/condcom.html。 





2. 浏览 器 注意 事项 
口 并 非 所 有 的 访问 者 都 使 用 同样 的 浏览 


器 ， 同 样 的 操作 系统 ， 甚 至 同样 的 设备 
访问 你 的 网 站 。 因 此 ， 大 多 数 情况 下 ， 
在 将 网 站 放 到 服务 器 上 发 布 之 前 ， 通 党 
需要 在 很 多 浏览 需 上 对 页 面 进 行 测试 。 
推荐 在 开发 过 程 中 就 用 几 个 浏览 器 对 页 
面 定期 进行 测试 ， 这 样 ， 在 最 后 进行 
全 面 测试 时 , 碰 到 的 问题 就 会 少 一 些 。 
关于 如 何 对 页 面 进行 测试 ， 以 及 测试 
用 浏览 器 的 有 关 人 信息， 参见 20.6 节 。 




















口 有 时 ， 有 必要 针对 TE 的 特定 版 本 编写 














CSS 样式 规则 ， 以 修复 IE 的 异常 行为 
引起 的 问题 。 这 对 IE6 和 有 所 改善 的 
IE7 来 说 尤其 常见 。 

有 几 种 办 法 可 以 实现 上 述 要 求 ， 不 过 
从 性 能 上 说 ， 最 好 的 方法 是 使 用 条 件 
注释 在 html 元 素 上 创建 正版 本 特有 
的 类 ， 并 在 样式 表 中 应 用 这 个 类 。 更 
多 细节 参见 http://paulirish.com/2008/ 
conditional-stylesheets-vs-css-hacks- 
answer-neither/。 这 个 页 面包 含 的 内 容 
较 多 ， 如 果 你 想 看 该 用 什么 代码 ， 可 
以 直接 转 至 标题 “Throw it on the html 
tag" ( 同时 请 阅读 代码 后 面 的 注解 ) 。 
男 一 种 方法 是 使 用 条 件 注释 引入 位 于 











每 一 栏 都 有 基于 像素 的 宽度 。 顾 名 思 
义 ， 无 论 是 使 用 移动 电话 和 平板 电脑 
等 较 小 的 设备 查看 页 面 ， 还 是 使 用 桌 
面 浏览 句 并 对 窗口 进行 缩小 ， 它 的 宽 
度 都 不 会 改变 。 你 在 浏览 万 维 网 时 已 
经 见 过 不 少 固定 布局 的 网 站 了 ， 尤 其 
是 公司 网 站 和 大 有 牌 网 站 。 固 定 布局 也 
是 学 习 CSS 时 最 容易 掌握 的 布局 方式 。 
流 式 (fluid zk liquid ) 布局 使 用 百 分 
数 定义 宽度 ， 人 允许 页 面 随 显示 环境 的 
改变 进行 放大 或 缩小 。 这 种 方法 后 来 
被 用 于 创建 响应 式 ( responsive ) 布局 
和 自 适 应 (adaptive ) 布局 ， 这 些 布局 
方式 不 仅 可 以 像 传统 的 流 式 布局 那样 
在 手机 和 平板 电脑 上 缩小 显示 ,还 可 以 
根据 屏幕 尺寸 以 特定 方式 调整 其 设计 。 
这 就 可 以 在 使 用 相同 HIML 的 情况 下 ， 

为 移动 用 户 、 平 板 电 脑 用 户 和 桌面 用 
户 定 制 单独 的 体验 ， 而 不 是 提供 三 个 
独立 的 网 站 。 (Ethan Marcotte 创建 了 
术语 “响应 式 Web 设计 ” (responsive 
Web design ) 及 其 背后 的 技术 包 。 想 要 
对 此 有 所 了 解 ， 参见 他 发 表 在 A List 
Apart 上 的 文章 (www.alistapart.com/ 
articles/responsive-web-design/ ) 。 他 在 
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Responsive Web Design 一 书 中 对 此 作 了 
深入 探讨 ， 强 烈 推 荐 读者 去 读 一 读 。 
自 适应 布局 使 用 了 一 些 相同 的 技术 。) 
O 弹性 (elastic ) 布局 对 宽度 和 其 他 所 有 
属性 的 大 小 值 都 使 用 em， 从 而 让 页 面 
根据 用 户 的 font-size 设 置 进行 缩放 。 
没有 一 种 布局 方式 可 以 适用 于 所 有 的 情 
景 ， 事 实 上 还 有 一 些 混 合 的 方式 。 本 章 将 讲 
解 如 何 创 建 一 个 混合 流 式 布局 和 固定 布局 的 
布局 : 每 栏 都 是 流 式 的 、 基 于 百分数 的 宽度 ， 
从 而 可 对 其 进行 放大 或 缩小 ， 不 过 整个 页 面 
宽度 拥有 一 个 固定 的 最 大 宽度 ， 限 制 了 它 能 
放大 到 的 宽度 。 














11.2 ”建立 页 面 结构 


使 用 CSS 的 主要 原因 是 为 了 将 格式 及 样 
式 规则 与 页 面 的 内 容 分 离 。 这 会 让 页 面 更 容 
易 维 护 , 并 为 应 对 不 同 的 浏览 器 、 平 台 、 设 备 ， 
甚至 打印 的 需求 提供 了 灵活 性 。 就 像 处 理 文 
本 样式 一 样 ，CSS 也 为 页 面 的 整体 布局 提供 
了 各 种 方法 。 可 以 将 CSS 应 用 于 第 3 章 讲 到 
的 表现 页 面 主体 结构 元 素 的 内 容 容器 ， 人 参见 
图 11.2.1 和 图 11.2.2。 使 用 CSS, 页 面 的 报头 、 
主 内 容 区 、 侧 栏 、 页 面 级 页 脚 等 都 会 使 页 面 
在 视觉 上 变 得 生动 起 来 。 
































«body» 
«div id="container"> 
«div id-"page"» 
<l-- ==== 开始 报头 ==== --> 
«header id-"masthead" role-"banner'"» 


» treasures on film«/span»«/a»«/p» 


«div» 
«nav role-"navigation"» 
e. [链接 列表 ] .… 
«nav» 


«form method-"get" role-"search"» 
«/form» 
</div> 


</header> 
<!-- 结束 #masthead --> 


«I-- ==== 开始 主体 内 容 ==== --> 
«div id-"main" role="main"> 
«hi»Recent Entries«/h1» 
<l-- 开始 第 1 个 条 目 - 
«section class-'entry"» 
«header» 


«/header» 
es [BAR] ... 


«div class-"intro"» 





«p class-"logo "><a href-"/"»photobarcelona&hellip; «span»capturing barcelona's cultural 


«h2 lang-'es'»Hospital Sant Pau«/h2» 
«p class-'date"»«time datetime-"2011-06-26" pubdate-"pubdate"»June 26, 2011«/time»«/p» 








( 接 下 页 未 完 代码 ) 
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( 续 上 页 未 完 代码 ) 








<p>The Saint Paul Hospital at the top ...«/p» 


«p class-"continued"»«a href-"i'»continued«/a»«/p» 
«/div» 
«/section» 
<l-- 结束 .entry #1 --> 


de 开始 第 2 个 条 目 --> 
«section class-'entry"» 


«/section» 
<l-- 结束 .entry #2 --> 


de 开始 第 3 个 条 目 --> 
«section class="entry"> 


«/section» 

<l-- 结束 .entry #3 --> 
</div> 
<l-- 结束 #main 内 容 --> 


<l-- ==== 开始 侧 栏 ==== --> 
«div id-"related" class-"sidebar" role-"complementary"» 
«aside class-"excerpt"» 
«h2»From my Window«/h2» 


«/aside» 


«aside class-"archive"» 
«nav role-"navigation"» 
«h2»Archive«/h2» 

..。 [链接 列表 ] ... 


«/nav» 
«/aside» 
«/div» 
«l-- 结束 #sidebar --> 


<|-- ==== 开始 页 脚 ==== --> 
«footer id-"footer" role-"contentinfo"» 
«hi»about this photoblog«/hi» 


..。 [图 像 列表 ] ... 
</footer> 
«l-- 结束 #footer --> 


</div> 
《<1-- 结束 #page --> 
</div> 











ij 


布局 


> 
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( 续 上 页 未 完 代码 ) 





<!-- #container --> 











«/body» 
</html> 
11.2.1 这 是 贯穿 本 章 的 文档 ， 四 个 主要 区 块 (masthead、main、sidebar 和 footer) 包含 在 两 个 外 部 包 











装 容器 (container 和 page ) 里 。 读 者 可 以 在 本 书 网 站 上 找到 完整 的 文件 (www.bruceontheloose.comy/htmlcss/ 
examples/chapter-ll/finished-page.html ) 。 默 认 情 况 下 ， 页 面 很 普通 ， 但 具有 各 种 功能 ( 参见 图 11.2.2 ) 


Ele Edt View History Bookmarks Tols Help 
L| phetobarcelona - Liz Castro's photographs a... Xj 








photobarcelona... capturing barcelona's cultural treasures on film 








Recent Entries 


Hospital Sant Pau 


June 26, 2011 





The Saint Paul Hospital at the top of Gaudi Avenue in the Sagrada Familia 
neighborhood is an oft-overlooked gem of modernist architecture. Although the 
building was begun in 1902 under the direction of the architect Lluís Doménec i 
Montaner, the hospital itself dates from the 14th century It serves some 34,000 
inpatients yearly, along with more than 150,000 emergency room. 


continued 


Cathedral Cloister 





June 24, 2011 
11.2.2 ”这 是 示例 在 浏览 器 里 显示 的 样子 ， 没 有 
除 浏 览 器 默认 样式 以 外 的 样式 。 由 于 它 的 语义 结构 
非常 好 ， 页 面 是 完全 可 用 且 可 理解 的 ， 只 是 有 一 点 
朴素 


建立 页 面 结构 的 步骤 

(1) 恰当 地 使 用 article、aside、nav、 
section, header, footer 和 div 等 元 素 将 页 
面 划 分 成 不 同 的 逻辑 区 块 。 根 据 需要 ， 对 它 
们 应 用 ARIA 地 标 角 色 。 上 述 两 点 的 详细 说 
明 见 第 3 章 。 图 11.2.1 包括 以 下 内 容 。 

口 用 于 为 页 面 应 用 一 些 设计 并 将 页 面包 

起 来 的 容器 和 页 面 div。 











口 用 作 报 头 的 header, 包括 标识 、 标 语 、 
搜索 框 和 主导 航 。 
OQ 包含 主体 内 容 的 主 div， 同 时 将 其 划 
分 为 多 个 入 口 section。 
OQ 容纳 月 度 观 点 和 链接 的 侧 栏 div, 
口 包含 “关于 ”等 内 容 的 页 面 级 footer 
元 素 。 
(2) 按照 一 定 的 顺序 放置 内 容 ， 确 保 页 
面 在 不 使 用 CSS 的 情况 下 也 是 合理 的 (人 参见 
图 11.2.2 ) 。 例 如 ， 首 先是 报头 ， 接 着 是 主 
体内 容 ， 接 着 是 一 个 或 多 个 侧 栏 ， 最 后 是 页 
面 级 的 页 脚 。 将 最 重要 的 内 容 放 在 最 上 面 ， 
对 于 智能 手机 和 平板 电脑 等 小 屏幕 用 户 ( 以 
及 使 用 不 支持 CSS 的 老式 移动 设备 的 用 户 ) 
来 说 ， 不 用 滚动 太 远 就 能 获取 主体 内 容 。 此 
外 ， 搜 索引 警 “ 看 到 ”的 页 面 也 类 似 于 未 应 
用 CSS 的 页 面 , 因此 , 如 果 将 主体 内 容 提前 ， 
搜索 引擎 就 能 更 好 地 对 站 点 进行 索引 。 最 后 
一 点 ， 屏 幕 阅读 器 用 户 也 用 这 种 方式 访问 网 
站 ， 即 按照 HTML 的 顺序 访问 (用 户 常常 在 
标题 之 间 跳 转 ， 而 不 是 听取 整个 页 面 ， 但 无 
论 是 哪 种 情况 ， 他 们 都 可 以 更 快 地 访问 到 主 
体内 容 ) 。 

(3) 以 一 致 的 方式 使 用 标题 元 素 (hi ~ 
h2 ), 从 而 明确 地 标识 页 面 上 这 些 区 块 的 信息 ， 
并 对 它们 按 优先 级 排序 。 

(4) 使 用 注释 来 标识 页 面 上 不 同 的 区 域 及 
其 内 容 。 如 图 11.2.1 所 示 ， 笔 者 喜欢 使 用 一 种 
不 同 的 注释 格式 标记 区 块 的 开始 ( 而 非 结束 ) 。 
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CNES 不 一 定 要 在 应 用 CSS 之 前 就 标记 
好 整个 页 面 。 实 践 中 ， 很 少 先 将 一 个 区 块 
的 HTML 写 好 ， 再 为 其 编写 一 些 或 全 部 的 
CSS， 然 后 再 对 下 一 个 区 块 重复 这 一 过 程 ， 等 
等 。 处 理 的 方式 取决 于 个 人 习惯 ， 以 及 最 适 
合 你 的 方式 。 对 于 本 章 的 示例 ， 我 先 将 所 有 
的 内 容 标 记 好 ， 再 对 其 添加 样式 。 


你 可 能 已 经 注意 到 ， 我 在 图 11.2.1 中 
使 用 了 section 元 素来 标记 每 个 包含 部 分 博 
文 的 条 目 。 如 果 它 们 是 完整 的 博文 条 目 ， 我 
就 会 使 用 article 标记 它们 ， 就 像 单独 的 、 

完整 的 博客 文章 页 面 那样 。 那 样 的 话 ， 我 可 
能 会 聚合 完整 的 博客 文章 ， 而 不 仅仅 是 包含 
在 示例 博文 条 目 中 的 介绍 部 分 。 对 它们 使 用 
article 替代 section 也 没有 错 ， 只 是 代表 这 
一 段 代码 适合 用 于 聚合 。 第 3 章 包含 了 各 种 
联合 使 用 article 和 section 以 及 单独 使 用 它 
们 的 例子 。 


在 CSS 选择 器 中 使 用 ARIA 地 标 角色 (而 非 id) 为 元 素 添加 样式 

图 11.2.1 为 恰当 的 元 素 添加 了 ARIA 地 标 角色 。 在 第 9 章 中 ， 我 曾 建议 避免 或 尽 可 能 少 
地 为 添加 样式 而 使 用 id ( 参见 9.3 节 的 “类 选择 器 与 id 选择 器 的 比较 ” ) 。 

定义 CSS 选择 器 时 ， 在 某 些 看 似 需 要 借助 id 的 情况 下 ， 其 实 可 以 使 用 地 标 角色 。 


以 图 11.2.1 中 的 页 脚 为 例 ， 其 HTML X: 


«footer id-"footer" role-"contentinfo"» 
... page footer content ... 


«/footer» 
对 应 的 使 用 id 选择 器 的 简化 CSS 为 : 
#footer { 


border-top: 2px dotted #b74e07; 
clear: both; 


} 


#footer h1 ( 
margin-bottom: .25em; 


} 


现在 ， 去 掉 id="footer" 使 HTML 得 到 简化 ， 因 为 添加 这 个 id 只 是 出 于 为 页 脚 设置 样式 


的 目的 (而 不 是 为 指向 此 页 脚 的 锁链 接 所 用 ) 。 


<footer role="contentinfo"> 
... page footer content ... 
«/footer» 


地 标 角色 是 属性 ， 因 此 可 以 在 属性 选择 器 中 使 用 它们 。 


footer[role="contentinfo”] { 
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border-top: 2px dotted #b74e07; 
clear: both; 


) 


footer[rolez"contentinfo"] hi ( 
margin-bottom: .25em; 


} 


第 一 条 样式 规则 表示 “查找 role 属性 等 于 contentinfo 的 footer 元 素 ”， 第 二 条 
“查找 包含 在 role 属性 等 于 contentinfo 的 footer 元 素 中 的 h 元 素 ”。 
结果 与 前 面 使 用 id 选择 器 的 CSS 完全 相同 。 


zh 


规则 表 


对 其 他 包含 地 标 角色 的 元 素 也 可 以 采取 类 似 的 做 法 。 对 本 章 示 例 采 取 地 标 角色 的 做 法 参 
JU Www.bruceontheloose.com/htmlcss/examples/chapter-11/finished-page-selectors-with-landmark- 
roles.html。Jeremy Keith 发 表 的 相关 讨论 参见 http://adactio.com/journal/4267/。 


注意 ，IE6 并 不 支持 属性 选择 器 ， 


因此 这 种 方法 可 能 并 不 适合 你 ， 这 取决 于 你 的 受众 。 


重要 提示 : 仅 在 页 面 中 适合 使 用 地 标 角 色 的 地 方 使 用 它们 。 不 要 仅仅 为 了 给 某 元 素 设 置 
样式 就 添加 地 标 角色 。 这 种 情况 下 应 该 使 用 类 。 要 复习 有 关 地 标 角色 的 知识 ， 参 见 3.14 节 。 


11.3 在 旧版 浏览 器 中 为 HTML5 
元 素 添 加 样式 


我 们 已 经 知道 ， HTML5 引入 了 一 些 新 的 
语义 化 元 素 ， 其 中 大 多 数 在 第 3 章 和 第 4 章 
作 了 讲解 。 在 大 多 数 情 况 下 ， 现 代 浏 览 器 原 
生 支 持 这 些 元 素 。 从 样式 的 角度 来 说 ， 这 意 
味 着 浏览 器 将 为 这 些 新 的 元 素 应 用 默认 样式 ， 
就 像 它 们 对 待 早 在 这 门 语言 诞生 之 际 就 存在 
的 元 素 那 样 。 例 如 ，article、aside、nav 和 
section ( 以 及 其 他 的 一 些 ) 元 素 显示 为 单独 
的 行 ， 就 像 div、blockquote、p 以 及 其 他 的 
在 HTML5 之 前 的 HTML 版 本 中 称 做 块 级 元 








素 的 元 素 。 
你 可 能 会 想 : “对 于 旧版 浏览 絮 呢 ”这 


些 浏览 器 出 现时 还 不 存在 HTMLS5 的 新 元 素 ， 
我 该 如 何 使 用 这 些 元 素 呢 ? ” 
Ad. HU SE CK d và as fo 











许 对 它们 并 不 原生 支持 的 元 素 添 加 样式 。 
Internet Explorer 是 个 例外 ， 不 过 第 (2) 步 中 描 
述 了 一 个 简单 的 解决 办 法 。 因 此 ， 跟 着 下 面 
三 个 简单 的 步 绝 ， 就 可 以 开始 为 包含 HTML5 
元 素 的 页 面 添 加 样式 了 。 

针对 全 部 浏览 器 为 HTML5 新 元 素 添 加 样式 

(1) 将 下 面 的 代码 添加 到 网 站 的 主 样 式 表 
文件 ( 即 所 有 页 面 都 用 到 的 样式 表 文 件 ) : 











article, aside, figcaption, 
» figure, footer, header, 
» hgroup, menu, nav, section { 


display: block; 
} 
原因 : 大 多 数 浏览 絮 默 认 将 它们 无 法 识 
别 的 元 素 作 为 行内 元 素 处 理 。 因 此 这 一 小 段 
CSS 将 强制 HTMLS5 新 的 “类 块 级 ”语义 元 素 
显示 在 单独 的 行 ( 对 IE 还 需要 做 更 多 的 工作 ， 
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下 一 步 将 会 讲 到 ) 。 各 浏览 器 内 置 的 默认 样 
式 表 均 对 div, blockquote, p 等 元 素 声 明了 
display: block;, 

(2) 对 于 Internet Explorer 在 IE9 之 前 的 版 
本 ， 要 为 新 的 HTMLS 元 素 正 常 添加 样式 ， 将 
下 面 突 出 显示 的 代码 添加 到 每 个 页 面 的 head 
元 素 ( 不 是 header 2628 ) ， 最 好 置 于 指向 
CSS 文件 的 链接 后 面 。 





<!DOCTYPE html» 


«html lang-"en"» 

«head» 

«meta charset-"utf-8" /» 
«title»photobarcelona«/title» 
«link rel="stylesheet" href= 


» "assets/css/base.css" /> 
<!--[if lt IE 9]> 
«script src-'http://html5sshiv. 
> googlecode.com/svn/trunk/ 
> html15.js"»«/script» 
«I[endif]--» 
</head> 
<body> 


要 了 解 为 什么 要 这 样 做 ， 参 见 “ 关 于 
HTMLS 剃刀 ”。 

(3) 现在 , 可 以 随意 使 用 CSS 添加 样式 了 ! 

在 为 元 素 设置 样式 的 过 程 中 ， 你 可 能 偶 
尔 会 遇 到 一 些小 故障 ， 不 过 在 大 多 数 时 候 不 


会 出 现 问题 。 


这 种 方法 及 替代 方法 有 一 个 缺陷 。 由 
于 在 IE6 至 IE8 中 为 HTML5 元 素 设置 样式 
需要 JavaScript， 因 而 如 果 用 户 的 浏览 器 不 
支持 或 关闭 了 JavaScript， 这 些 用 户 看 到 的 
HTMLS 元 素 就 是 无 样式 的 ， 甚 至 可 能 是 凌乱 
的 。 对 于 你 自己 的 网 站 ， 你 可 能 愿意 承担 这 
种 风险 ， 就 像 其 他 很 多 设计 人 员 和 开发 人 员 
那样 。 不 过 ， 如 果 这 是 你 为 客户 做 的 网 站 ， 
在 使 用 需要 显示 为 块 级 元 素 的 HTMLS 元 素 之 
































前 ， 需 要 让 客户 弄 清楚 这 一 点 。 他 们 可 能 
包含 浏览 器 使 用 情况 的 用 户 分 析 工 具 以 帮助 
决策 。 
替代 方法 
口 如 果 你 对 使 用 article, section, nav 等 
第 (1) 步 中 列 出 的 元 素 感到 不 舒服 ， 可 
以 使 用 div 替代 它们 。 这 也 是 HTMLS 
出 现 之 前 人 们 建立 网 站 的 方式 。 这 样 
做 会 降低 网 站 的 语义 化 程度 ， 不 过 这 
也 是 一 种 可 接受 的 方法 。 有 的 人 甚至 
选择 类 来 模仿 新 的 HTMLS 元 素 名 称 
以 适应 新 元 素 ， 例 如 : 


«div class="header">...</div> 




















«div class="article">...</div> 
«div class="section">...</div> 


等 等 。 

口 如 果 你 确实 要 使 用 新 的 元 素 ， 你 可 以 
尽 可 能 多 地 编写 指向 其 他 元 素 的 CSS 
选择 器 ， 以 降低 JavaScript 关闭 时 产 
生 的 影响 。 我 在 本 章 的 页 面 布 局 中 经 
常 这 样 做 。 在 关闭 了 JavaScript 的 IE6 
中 ， 页 面 看 起 来 会 有 所 不 同 ， 但 也 并 
非 不 可 用 ， 参 见 图 11.3.1。 
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11.8.1. 在 关闭 了 JavaScript 的 IE6 中 显示 的 页 
面 。 由 于 关闭 了 JavaScript， 因 而 HTMLS 剃刀 文 
件 不 会 被 执行 。 报 头 区 域 看 起 来 有 点 不 连贯 ， 但 页 
面 从 整体 上 看 是 完好 的 
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CES 可 以 下 载 html5.js(HTMLS 剃刀 文件 ) 
并 添加 到 网 站 的 文件 中 去 ， 而 不 是 指向 http:/ 
htmi5shiv.googlecode.com/svn/trunk/html5.js o 
不 过 ， 该 文件 时 常 更 新 ， 因 此 ， 在 第 (2) FP 
使 用 有 关 代 码 时 ， 从 Google Code 加 载 这 个 文 
件 并 不 是 个 坏 主意 。 


关于 HTML5 剃刀 

与 其 他 主流 浏览 器 不 同 , Internet Explorer 8 
及 之 前 的 版 本 会 忽略 它们 不 原生 支持 的 元 
X49 CSS. 

幸好 有 办 法 让 下 的 这 些 版 本 识别 这 些 
元 素 一 一 使 用 JavaScript 为 每 个 元 素 设 置 
document . createElement("elementname")., 
iX X Sjoerd Visscher 发 现 的 一 种 方法 。 例 如 ， 
document.createElement("aside") 让 IE 可 
以 识别 aside 元 素 ， 这 样 ， 上 面 第 (1) 步 中 
添加 的 样式 规则 (以 及 你 创建 的 任何 其 他 
样式 ) 就 生效 了 。 

John Resig 记录 了 这 种 方法 ， 并 将 其 命 
名 为 HIMLS 闲 刀 (也 称 HIMLS 热 片 ) -o 34 
天 谢 地 ， 我 们 不 必 亲 自 为 每 个 新 的 HTML5 
元 素 编 写 JavaScript， 因 为 Remy Sharp 将 
John 的 方法 打包 成 了 一 个 JavaScript 文件 ， 
并 放 在 网 络 社区 上 ( html5shiv.googlecode. 
com/svn/trunk/html5.js ) 。 后 续 的 贡献 者 又 
增强 了 该 文件 。 

使 用 HTML5 剃刀 再 简单 不 过 了 。 只 
需要 链接 到 该 文件 就 可 以 了 ， 就 像 第 (2) 步 


中 粗 体 显示 的 代码 那样 。 
HTMLS 4] 7] 4t 3k JE ri st Y Rode — 
JavaScript Æ, 如 Modemizr ( www.modemizr. 


com/) 。 因 此 ， 如 果 你 在 页 面 中 使 用 了 
Modernizr， 就 不 需要 单独 加 载 HTMLS 3$] 77 
了 。 顺 便 说 一 下 ，Modernizr 是 一 个 非常 方便 
的 库 ， 它 可 以 检测 浏览 器 是 否 支持 HTMLS 
和 CSS3 的 各 种 特性 。 下 载 下 来 用 吧 ! 


11.4. 对 默认 样式 进行 重 置 或 标 
准 化 

前 面 提 到 ， 每 个 浏览 器 都 有 内 置 的 默认 
样式 表 。HTML 会 遵照 该 样式 表 显 示 ， 除 非 
你 自己 编写 的 CSS 覆盖 了 它们 。 整 体 上 ， 不 
同 浏览 器 提供 的 默认 样式 表 是 相似 的 ， 但 也 
存在 一 定 的 差异 。 为 此 ， 开 发 人 员 在 应 用 他 
们 自己 的 CSS 之 前 , 常常 需要 抹 平 这 些 差 异 。 

有 两 种 主要 的 抹 平 差异 的 方法 。 

口 使 用 CSS 重 置 (reset ) 开始 主 样 式 表 ， 
如 Eric Meyer 创 建 的 Meyer 重 置 ( http:// 

meyerweb.com/eric/tools/css/reset/ ) 。 
男 外 还 有 其 他 的 一 些 重 置 样式 表 。 

口 使 用 Nicolas Gallagher 和 Jonathan Neal 
创建 的 normalize.css 开始 主 样式 表 。 
该 样式 表 位 于 http://necolas.github.com/ 
normalize.css/ ( 点 击 Get the normalize. 
css file 链接 ) 。 

CSS 重 置 可 以 有 效 地 将 所 有 默认 样式 都 
设 为 “ 零 ”， 如 图 11.4.1 所 示 。 第 二 种 方法 ， 
即 normalize.css, ， 则 采取 了 不 同 的 方式 。 它 并 
不 对 所 有 样式 进行 重 置 ， 而 是 对 默认 样式 进 






































行 微调 ， 使 它们 在 不 同 的 浏览 器 中 有 相似 的 
参见 图 11.4.2。 


外 观 ， 
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11.4.1. 这 是 应 用 了 重 置 的 示例 页 面 。 最 大 的 变 
化 是 所 有 的 字体 大 小 都 变 成 一 样 的 了 ， 所 有 的 外 边 
距 和 内 边 距 都 设 成 0 了 
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Recent Entries 


Hospital Sant Pau 


June 26, 2011 





The Saint Paul Hospital at the top of Gaudí Avenue in the Sagrada 
Família neighborhood is an oft-overlooked gem of modernist 
architecture. Although the building was begun in 1902 under the 
direction of the architect Lluís Doménec i Montaner, the hospital 
itself dates from the 14th century It serves some 34,000 inpatients 
yearly, along with more than 150,000 emergency room.. 


continued 


Cathedral Cloister 


June 24, 2011 


11.4.2 ”这 是 使 用 了 normalize.css ( 而 不 是 重 置 ) 
的 示例 页 面 。 它 与 无 样式 的 默认 显示 效果 很 相似 ， 
但 也 有 差异 。 更 重要 的 是 ， 这 个 版 本 与 使 用 当今 常 
见 的 浏览 器 查看 的 效果 是 极为 相似 的 

并 非 一 定 要 用 到 这 两 种 方法 中 的 一 种 。 
保留 浏览 妖 的 默认 样式 ， 并 自己 编写 相应 的 
CSS 也 是 很 好 的 。 

在 本 章 中 ,我 使 用 Meyer 重 置 开始 编写 
页 面 ， 并 对 文本 添加 了 一 些 样式 。 因 此 ,在 
应 用 余下 的 样式 之 前 ， 页 面 如 图 11.4.3 所 示 。 
由 于 使 用 了 重 置 ， 你 可 以 更 清晰 地 看 到 本 章 
介绍 的 CSS 是 如 何 影 响 布局 的 。 在 阅读 本 章 
内 容 的 过 程 中 ， 你 需要 了 解 如 何在 用 到 重 置 
的 情况 对 页 面 进 行 布 局 。 由 于 这 种 方法 非常 
流行 ， 因 此 这 也 是 一 项 重要 的 技能 。 
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图 11.4.3 ”这 是 使 用 了 重 置 并 对 文本 应 用 了 一 些 样 
式 的 示例 页 面 。 可 以 从 这 里 起 步 ， 随 着 本 童 的 介绍 
逐步 为 页 面 添加 余下 的 样式 




















11.5 盒 模 型 


CSS 处 理 网 页 时 ， 它 认为 每 个 元 素 都 包 
含 在 一 个 不 可 见 的 盒子 里 。 盒 子 由 内 容 区 域 、 
内 容 区 域 周围 的 空间 ( 内 边 距 ，padding ) 、 内 
边 距 的 外 边缘 (边框 ，border ) 和 边框 外 面 将 
元 素 与 相 邻 元 素 隔 开 的 不 可 见 区 域 ( 外边 距 ， 
margin) 。 这 类 似 于 挂 在 墙 上 的 带 框架 的 画 ， 其 
中 衬 边 是 内 边 距 ， 框 架 是 边框 ， 而 该 画 框 与 相 
邻 画 框 之 间 的 距离 则 是 外 边 距 ， 参 见 图 11.5.1。 
可 以 使 用 CSS 确定 每 个 元 素 的 盒子 的 
外 观 和 位 置 ， 并 由 此 控制 网 页 的 布局 ， 参 见 
图 11.5.2。 
正如 第 1 章 中 讨论 的 ， 每 个 元 素 的 盒子 可 
是 块 级 的 〈 从 新 的 一 行 开 始 ， 就 像 一 个 新 的 
段落 ) ， 也 可 以 是 行内 的 (不 会 产生 新 行 ) 。 
这 对 网 页 初始 布局 的 影响 是 : 在 默认 情况 下 ， 
元 素 按 照 它们 在 HTML 中 自 上 而 下 出 现 的 次 
序 显 示 ( 这 被 称 作文 档 流 ，document flow ) ， 
并 在 每 个 块 级 元 素 的 开头 和 结尾 处 换行 。 
对 元 素 的 盒子 进行 定位 有 四 种 基本 方法 : 
可 以 让 盒子 处 于 文档 流 中 (这 是 默认 的 方式 ， 
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也 称 做 静态 方法 ， 它 也 是 用 得 最 多 的 方法 ， 
参见 图 11.5.3 和 图 11.5.4 ) ， 可 以 让 盒子 脱离 
文档 流 ， 并 指定 该 元 素 相 对 于 其 父 元 素 ( 绝 
对 方法 ， 需 慎 用 ) 或 浏览 器 窗口 ( 固定 方法 ， 
实践 中 用 得 更 少 ) 的 精确 坐标 ， 还 可 以 相对 
于 盒子 在 文档 流 中 的 默认 位 置 对 其 进行 移动 
(相对 方法 ， 使 用 频率 介 于 静态 方法 和 另 两 
种 方法 之 间 ) 。 此 外 ， 如 果 盒 子 相互 重 倒 ， 
还 可 以 指定 它们 的 释放 次 序 (z-index ) 。 


















margin-top 
border-top 
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11.5.1. 每 个 元 素 有 盒子 都 有 四 个 决定 其 大 小 的 





属性 : 内 容 区 域 、 内 边 距 、 边 框 和 外 边 距 。 可 以 单 
独 控制 每 一 个 属性 

同时 , 可 以 控制 盒子 的 外 观 , 包括 
background, padding, border, margin, width, 
height, alignment, color 等 。 本 章 将 讨论 所 有 
这 些 属 性 。 

注意 ， 有 些 布局 属性 ( 尤其 是 em 值 和 百 
分 数 ) 是 依赖 于 其 父 元 素 的 。 记 住 ， 父 元 素 
是 直接 包含 当前 元 素 的 元 素 (参见 1.3 节 中 的 

“ 父 元 素 和 子 元 素 ” 小 节 ) o 


CES 5 115.1 是 根据 Rich Hauck $9 £A 
图 绘制 的 ( 该 图 也 是 根据 CSS 规范 中 的 插图 绘 
制 的 ) : www.mandalatv.net/itp/drivebys/css/。 











内 容 区 域 与 边框 之 间 的 空 
间 是 内 边 距 (图 中 四 边 的 
内 边 距 均 为 10 像 素 ) 。 上 
述 区 域 均 会 填充 背景 色 。 


侧 栏 内 容 区 域 。 在 
这 个 例子 中 ， 没 有 
在 CSS 中 显 式 地 指定 
宽度 和 高 度 。 
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外 边 距 是 边框 外 边 的 不 可 见 区 ” 外 边缘 是 边框 (这 
碟 ( 图 中 的 左 外 边 距 为 包含 整 个 盒子 没有 边框 ) 。 
个 页 面 的 容器 宽度 的 72% ) 。 


11.5.2 ”图 11.5.1 的 盒 模型 
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图 11.5.8 ”还 记得 本 章 开 头 未 应 用 任何 样式 的 示例 
页 面 吗 ? 这 是 示例 页 面 的 文档 流 。 尽 管 为 文本 添加 
了 样式 ， 但 各 元 素 的 次 序 并 未 改变 ， 参 见 图 11.5.4 
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11.54 
对 文本 添加 了 样式 ， 因 此 常规 的 文档 流 没 有 任何 
变化 


这 是 目前 为 止 页 面 的 显示 效果 。 由 于 仅 














11.6 ”修改 背景 


正如 10.9 节 讲 到 的 ， 可 以 对 整个 页 面 和 
单个 元 素 设置 背景 ， 如 图 11.6.1 所 示 。 这 包 
括 几乎 所 有 的 元 素 , 甚至 是 表单 和 图 像 (是 的 ， 
图 像 也 可 以 有 背景 图 像 ! ) 。 


1. 使 用 背景 图 像 
(1) 输入 background-image:. 
(2) 输入 uxl(image.png), 3X Hif) image. 
png 是 要 用 做 背景 的 图 像 的 路 径 和 文件 名 ( 如 
11.6.1 所 示 ) 。 或 者 输入 none， 表 示 不 使 
用 任何 图 像 (只 能 用 于 覆盖 另 一 条 为 元 素 应 
用 背景 图 像 的 样式 规则 ) 。 


2. 让 背景 图 像 重复 显示 

输入 background-repeat: direction, iX 
里 的 direction 可 以 是 repeat ( 使 图 像 在 水 平 、 
垂直 两 个 方向 平 铺 ) 、repeat-x (使 图 像 在 水 
平方 向 平 铺 ) 、repeat-y (使 图 像 在 垂直 方向 
平 铺 ) ， 参 见 图 11.6.1; 或 no-repeat ( 不 平 
铺 图 像 ) 。 
































3. 控制 图 像 是 否 随 页 面 一 起 滚动 

(1) 输入 background-attachment: 。 

(2) 输入 fixed， 表 示 让 背景 图 像 固定 在 浏 
览 器 窗口 中 ( 即 访问 者 滚动 页 面 时 背景 图 像 
保持 不 动 ) ,或 者 输入 scroll, KREE S 
图 像 随 着 页 面 的 滚动 而 移动 。scroll 是 默认 
值 ， 因 此 ， 如 果 这 是 你 需要 的 效果 ， 就 不 必 
指定 。 这 是 很 常见 的 情形 。 


4. 指定 背景 图 像 的 位 置 

输 入 background-position: x y， 其 中 
X “可 以 是 百分数 ， 也 可 以 是 绝对 值 ， 如 
20px 147px ( 允许 输入 负数 ) 。 或 者 对 x 使 用 
left, center E} right, XJ y [ij top, center 
BK bottom, (更 多 例子 见 10.9 节 中 的 “更 多 
关于 背景 的 说 明 ”。 ) 

5. 修改 背景 颜色 

(1) 输入 background-color:。 

(2) 输入 transparent ( 让 元 素 的 背景 露 
出 来 ) 或 color， 这 里 的 color 是 颜色 名 称 、 
十 六 进 制 数 颜色 、RGB 颜色 、RGBA 颜色 、 
HSL 颜色 或 HSLA 颜色 (参见 7.4 节 中 的 “CSS 
Bü" ), A 1164. Fd 11.6.5 和 图 11.6.6 
所 示 。 


6. 同时 修改 所 有 背景 属性 

(1) 输入 background: 。 

(2) 以 任意 顺序 指定 任何 可 接受 的 背景 属 
性 值 ( 如 “使 用 背景 图像 ”到 “修改 背景 颜色 ” 
所 述 ) 参见 图 11.6.2 和 图 11.6.4。 
































background-color 的 默认 值 是 trans- 
parent, background-image 的 默认 值 是 none, 
background-repeat 的 上 默认 4ü 是 repeat, 
background-attachment 的 默认 值 是 scroll, 
background-position 的 默认 值 是 top left( 同 
00) 。 
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#container { 

background-image: 

> url(../img/bg-bluebench.jpg); 
background-repeat: repeat-y; 

) 











E 11.6.1. 首先 ， 对 最 外 层 的 容器 (包含 id="co- 
ntainer" 的 div) 应 用 背景 图 像 。 再 在 垂直 方向 〈y 
轴 ) 重复 图 像 。 这 是 定义 背景 图 像 的 长 格式 一 一 每 
个 属性 都 单独 声明 。 为 了 让 代码 尽 可 能 地 紧凑 ， 我 
在 样式 表 中 使 用 了 简 记 法 ， 如 图 11.6.2 所 示 。 但 不 
管 使 用 哪 种 方法 ， 图 11.6.3 中 的 实现 结果 都 不 太 好 






































[code block figure] 

#container { 

background: url(../img/bg-bluebench.jpg) 
> repeat-y; 











11.6.2 ”可 以 按照 第 10 章 和 稍 后 的 介绍 ， 使 用 
background 简 记 法 一 次 性 应 用 多 个 与 背景 有 关 的 
属性 。 推 荐 在 任何 时 候 都 尽 可 能 使 用 简 记 法 ， 尽 管 
有 时 候 指 定单 个 属性 也 是 有 意义 的 。 此 外 ， 背 景 图 
像 的 路 径 写 做 ../img/bg-bluebench.jpg， 这 是 因为 样 
式 表 位 于 与 /img/ 文件 夹 并 列 的 文件 夹 。 指 向 你 自 
己 的 图 像 的 路 径 可 能 并 不 相同 





i 














11.6.3 ”这 个 页 面 现 在 看 起 来 有 点 恐怖 ， 背 景 图 
像 让 文本 变 得 很 难 辨认 。 最 终 ， 我 们 会 覆盖 这 个 背 
景 图 像 ， 让 文本 重新 变 得 可 读 。 之 后 再 将 掀 开 这 层 
敌 善 层 ， 露 出 背景 的 某 些 部 分 























#container { 
background: url(../img/bg-bluebench.jpg) 
repeat-y; 


} 


#page { 
background: #fef6f8; 
} 


a:focus, 

a:hover, 

a:active { 
background: #f3cfb6; 
} 


.logo a:hover { 
background: transparent; 


} 


.Sidebar { 
background: #f5f8fa; 
} 


11.6.4 ”这 些 地 方 使 用 background-color 属性 也 
可 以 ， 但 没有 必要 ， 因 此 我 再 次 使 用 了 background 
简 记 法 。 为 page div 设 置 的 背景 会 让 文本 变 得 
可 读 (在 本 章 稍 后 部 分 ， 我 会 将 这 个 颜色 改 成 
白色 ) 。 接 着 ， 为 链接 在 鼠标 停留 时 的 状态 添 
加 了 背景 ， 从 而 更 清楚 地 表明 它们 是 链接 。 同 
时 ， 对 带 链接 的 网 站 标识 覆盖 了 这 个 效果 ， 为 它 
赋予 了 透明 的 背景 ， 从 而 在 鼠标 停留 时 背景 图 
像 也 能 露出 来 。 最 后 ， 为 sidebar div 中 的 每 月 
评论 栏 添加 了 背景 颜色 。 这 里 使 用 了 class, 
此 ， 如 果 将 来 另 一 个 侧 栏 需要 类 似 的 样式 就 很 容 
易 了 

















使 用 background 简 记 法 时 ， 不 一 定 要 
指定 所 有 的 属性 。 但 是 要 注意 ， 任 何 没 有 指 
定 的 属性 都 会 设 为 默认 值 ， 它 们 可 能 履 盖 先 
前 定义 的 样式 规则 。 


background 属性 不 是 继承 的 。 如 果 想 
窗 盖 另 一 个 样式 规则 ， 只 需要 显 式 地 设置 像 
transparent 或 scroll 这 样 的 默认 值 。 
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photobarcelona - Liz Castro's photographs and blog about Barcelona Mozilla preion 三 | 
Ele Edt View History Bookmarks Tools Help 
| [.] photobarcelona - Liz Castro's photographs a... 
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ospital Sant Pau 
June 26, 2011 





The Saint Paul Hospital at the top of Gaudí Avenue in the Sagrada Familia 
neighborhood is an oft-overlooked gem of modernist architecture. Although the 
building was begun in 1902 under the direction of the architect Lluís Domènec i 
Montaner, the hospital itself dates from the 14th century. |t serves some 34,000 
inpatients yearly, along with more than 150,000 emergency room... 


continued wd 


http:jjwww.bruceontheloose.com/htmlcss/examples/ about]. 


11.6.5 page div 的 背景 完全 覆盖 了 图 11.6.3 中 
设置 的 背景 图 像 。 稍 后 将 使 用 内 边 距 改变 这 种 情况 。 
注意 ， 没 有 鼠标 停留 的 链接 也 具有 与 page 相同 的 
背景 ， 而 鼠标 停留 的 About 链接 则 具有 高 对 比 度 的 
背景 ， 以 提醒 访问 者 注意 

















like me taking pictures. | confuse the locals by tall 


from my window 

Around the corner from our apartment there is a mosaics studio. 
End looked in wistfully thinking how cool it would be to make sot 
Bispleyed. 

This year, ! signed up. It’s a 22 hour workshop, spread into 2 hour 
Wednesday mornings, and it's been great, ve learned how to cut] 
Vor sandstone, and refers to a matte tile) and how to fit them tog 
projects. 
bo, the other day we make our annual pilgrimage to the Sagrada A 
Watching what they're working on, and there in the middle of thd 
kold mosaic triangles, just like the ones l've been cutting... 


archive 
May 2011 
Apr 2011 
Mar 2011 
Feb 2011 
Jan 2011 








about this photoblog 


图 11.6.6 sidebar 的 背景 颜色 是 最 浅 的 蓝 色 ， 这 
足以 使 它 与 其 他 部 分 有 所 区 别 〈 另 见 彩 搬 ) 





如 果 使 用 background-position 并 设 
为 repeat， 那 么 这 个 位 置 指定 的 是 重复 的 图 
像 中 第 一 个 图 像 开 始 的 位 置 。 例如， 从 top 
right、0 20px 等 位 置 开始 重复 。 


可 以 在 background-position 属性 中 
使 用 负数 ,例如 , background-position: -45px 
80px 会 将 图 像 定位 在 元 素 左 边 外 侧 45 像素 

( 因此 不 会 看 到 图 像 在 水 平方 向 上 的 头 45 个 
像素 ) 、 顶 部 内 侧 SO 像素 。 


ED 妥 为 整个 页 面 设置 背景， 
元 素 设 置 background 属性 


可 以 为 body 


如 果 同 时 指定 背景 颜色 和 URL， 在 
URL 中 的 图 像 加 载 时 才 人 弛 显示 这 个 颜色 ， 并 
在 背景 图 像 的 透明 部 分 及 图 像 未 履 盖 到 的 部 


分 露出 这 个 颜色 。 


CES 有 要 仔细 选择 文本 和 背景 的 颜色 ( 及 背 
景 图 像 ) ， 使 两 者 具有 足够 高 的 对 比 度 。 这 
对 视 障 用 户 来 说 尤其 重要 。 


11.7 ”设置 元 素 的 高 度 和 宽度 


可 以 为 很 多 元 素 设 置 高 度 和 宽度 ， 如 分 
块 内 容 、 段 落 、 列 表 项 、div、 图 像 、video、 
表单 元 素 等 (参见 图 11.7.1 和 图 11.7.2 ) 。 同 时 ， 
可 以 为 短语 内 容 元 素 ( 默认 以 行内 方式 显示 ) 





设 © display: block; 或 display: inline- 
block;， 再 对 它们 设置 宽度 或 高 度 。 (关于 





display E 性 的 更 多 信息 , 


1. 设置 元 素 高 度 或 宽度 的 步骤 
(1) 输入 width: w， 其 中 的 w 是 元 素 内 


参见 11.19 节 。 ) 





200 第 11 章 用 CSS 进行 布局 








容 区 域 的 宽度 ， 可 以 表示 为 长 度 ( 带 单 位 ， 
如 px、em 等 ) 或 父 元 素 的 百分数 。 或 者 使 用 
auto 让 浏览 器 计算 宽度 (这 是 默认 值 ) 。 

(2) 输入 height: hp， 其 中 的 是 元 素 内 
容 区 域 的 高 度 ， 只 能 表示 为 长 度 ( 带 单 位 ， 
如 px、em 等 ) 。 或 者 使 用 auto 让 浏览 器 计算 
高 度 ( 这 是 默认 值 ) 














#container { 
background: url(../img/bg-bluebench.jpg) 
' repeat-y; 
width: 90%; 

} 


#page { 
background: #fef6f8; 
width: 97.9167%; 

} 


#main { 
width: 71%; 
} 


input[type="text"] { 
width: 150px; 
} 


.photo { 
height: 75px; 
width: 100px; 


} 
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IThe Saint Paul Hospital at the top of Gaudí Avenue in the | 
Sagrada Familia neighborhood is an oft-overlooked gem of f 
modernist architecture. Although the building was begun in 

1902 under the direction of the architect Lluís Domènec i 

Montaner, the hospital itself dates from the 14th century. It 


634,000 iapatients-weorl-alongawith-more- th t » 
i 9% 
Ji 4, 2011 可 





06 - 719, 
Cathedral Cloister 
nx 

图 11.7.2 container div 包围 page div， 它 现在 

的 宽度 占 浏览 器 窗口 的 900%。 它 的 背景 图 像 在 边 上 

显示 了 一 部 分 ， 这 是 因为 page div 的 宽度 也 减少 

To main div 的 宽度 是 page div 的 71%， 而 不 是 

container div 或 浏览 器 窗口 的 71% 

















#container { 

background: url(../img/bg-bluebench.jpg) 
repeat-y; 

max-width: 950px; 

width: 9096; 

} 


图 11.7.3 max-width 属性 非常 适合 为 流 式 布 局 设 
置 外 围 限制 。 在 我 们 的 例子 中 ， 即 便 访 问 者 的 屏幕 
很 大 ， 也 不 希望 内 容 容 右 太 宽 。 如 果 不 希 望 元 素 太 




















图 11.7.1 将 container div 的 宽度 限制 为 浏览 
d 导出 一 些 空间 ( 即 图 11.7.2 中 边 
上 的 留 白 ) ， 从 而 不 至 于 显得 太 挤 。 通 过 将 page 
div ws container div 的 97.9167%， 可 
以 在 边 上 看 到 一 部 分 背景 图 像 (要 了 解 我 如 何 得 出 
这 个 百分数 ， 参 见 本 书 网 站 示例 代码 中 的 注释 ; 
同时 ， 你 也 可 以 自由 使 用 其 他 常规 的 百分数 ) 。 
通过 将 main div d page div 的 7196, 
可 以 为 侧 栏 留 出 一 些 空间 C 侧 栏 将 在 随后 移 到 边 
E) , input deser 搜索 表单 的 宽度 。 最 后 ， 
„photo 的 尺寸 控制 了 博客 文章 中 包 在 图 像 周 围 的 段 
落 的 大 小 ( .photo 的 尺寸 等 于 图 像 本 身 的 宽度 和 高 
BE) 


















































i 











^E. AIVA min-width 属性 ， 尽管 在 移动 电话 和 
其 他 较 小 的 设备 上 浏览 万 维 网 已 变 得 越 来 越 普遍 ， 
但 设置 min-width 仍 是 一 个 明智 的 



































BD 如 采 不 显 式 地 设置 宽度 
用 auto (参见 下 一 节 ) 。 


或 高 度 ， 就 使 
CES 记 住 ， 百 分 数 是 相对 于 父 元 素 的 宽度 
的 ， 而 不 是 相对 于 元 素 本 身 的 原始 宽度 的 。 


width 的 值 不 
边 距 (参见 下 一 节 ) 。 


包含 内 边 距 、 边 框 和 外 
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不 能 为 显示 为 行内 元 素 的 元 素 ( 如 短 
语 内 容 ) 设置 高 度 或 宽度 ， 除 非 为 它们 设置 
display: inline-block 或 display: block。 

关于 display 属性 的 更 多 信息 ,参见 11.19 节 。 
width 和 height 不 是 继承 的 。 

还 有 min-width、min-height、max-width 
和 max-height 属性 ， 参 见 图 11.7.3 (如果 你 
的 网 站 使 用 Internet Explorer 6， 要 注意 IE6 
并 不 支持 这 些 属性 ) 。 


2. 宽度 、 外 边 距 和 auto 

对 于 大 多 数 默 认 显示 为 块 级 元 素 的 元 素 ， 
width 的 auto 值 是 由 包含 块 的 宽度 减 去 元 素 
的 内 边 距 、 边 框 和 外 边 距 计 算出 来 的 。 包 含 
块 的 宽度 指 的 是 父 元 素 给 元 素 留 出 的 宽度 。 

对 于 图 像 这 样 的 元 素 ，auto 宽度 等 于 它 
们 固有 的 宽度 ， 即 外 部 文件 的 实际 尺寸 如 本 
章 示 例 页 面 中 的 图 像 ， 就 是 100 x75 ) 。 浮 动 
元 素 的 auto 宽度 为 0， 非 浮动 的 行内 元 素 会 
完全 忽略 width 属性 ( 即 不 能 为 em、cite 等 
元 素 设 置 宽 度 ， 除 非 将 它们 设置 为 display: 
inline-block 或 display: block ) 。 关 于 浮动 ， 
参见 11.10 节 ; 关于 display, 参见 11.19 节 。 

如 果 手 动 设 置 width、margin-left 和 
margin-right 值 ， 但 这 些 值 加 上 边框 和 内 边 
距 的 值 不 等 于 包含 块 的 大 小 ， 有 的 属性 就 
需要 作出 让 步 。 实 际 上 ， 浏览 器 会 覆盖 你 对 
margin-right 的 设置 ， 将 其 设 为 auto (参见 
11.7.4 和 图 11.7.5) o 























div { 

background: yellow; 
width: 300px; 

} 


p, 

.example { 

background: white; 
border: 6px solid blue; 
margin: 10px; 
padding: 5px; 


.eXample ( /* 第 二 个 段落 */ 

background: white; 

border-color: purple; 

width: 200px; 

} 
11.7.4 在 这 个 例子 中 ， 将 父 元 素 div 的 width 
设 为 300 像素 。 这 将 是 我 们 的 包含 块 。 然 后 ， 两 
个 段落 各 个 边 上 都 有 10 像素 的 外 边 距 、5 像素 的 
内 边 距 及 6 像素 宽 的 边框 。 第 一 个 段落 的 宽度 是 
自动 设置 的 ， 因 为 auto 是 width 的 默认 值 ( 除非 
指定 其 他 的 值 ) 。 第 二 个 段落 (在 HTML 中 带 有 
class-"example" ) 设 为 200px 


如 果 手 动 设置 width， 但 将 某 个 外 边 距 设 
为 auto， 那 么 这 个 外 边 距 将 进行 伸缩 以 弥补 
不 足 的 部 分 。 

不 过 ， 如 果 手 动 设置 width， 并 将 左右 
外 边 距 都 设 为 auto， 那 么 两 个 外 边 距 就 将 
设 为 相等 的 最 大 值 ( 导致 元 素 居中 ; 例如 ， 
#container { margin: 20px auto; } 会 使 对 
应 的 元 素 在 页 面 居中 显示 ) 。 这 也 是 我 对 示 
例 页 面 作 的 设置 ， 如 11.8 节 所 示 。 
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10 像素 的 自动 宽度 为 10 像素 的 
外 边 距 258 像素 外 边 距 


im 


Width - Mozilla Firefox EN -oxi 


le Edit view History |Bookmarks Tools pap 





| 


| Width 








This paragraph has atl automatic width, 
10pz margins, 5px padding, and 6px blue 
borders. Since the containing block is 
300px wide, this paragraph has a width of 
300-10-10-6-6-5-5 (that is, 300-42), or 
258 pixels, as determined by the browser 
automatically Don't forget you have to 
subtract the margin, border, and padding 
from both the left and right sides! 








This paragraph has 
class-"example" applied to it, 
so its width is set to 200 pixels, 


with the same 10px margins, 6px 
borders (though red), and 5px 
padding as the first paragraph. 
So, the total amount of horizontal 
space it occupies is 
200+10+10+6+6+5+5 (that is, 
200-42), or 242 pixels. Because 
it has an explicit width set, the 
paragraph isn't stretched by the 
browser automatically to fill the 
remaining space of the containing 


block. 
i — — — —width: 200px 








width: 300px (包含 块 ) 


11.7.5 “如果 width 是 auto ( 就 像 第 一 个 段落 那 








样 ) 
去 元 素 自身 的 外 边 路、 内 边 距 和 边框 计算 出 来 的 。 








， 它 的 值 就 是 由 包含 块 ( 黄色 区 域 ) 的 宽度 减 











如 果 


width 是 手动 设置 的 ( 就 像 第 二 个 段落 那样 ) ， 





则 右 外 边 距 常常 会 进行 调整 以 填补 不 足 的 空间 


如 果 对 外 边 距 设置 


H 





E， 第 二 个 应 


为 什么 min-height 通常 比 height 更 适用 

除非 你 确定 元 素 的 内 容 不 会 变 得 更 高 ， 最 
好 避免 在 样式 表 中 指定 高 度 。 在 大 多 数 情况 下 ， 
可 以 让 内 容 和 浏览 器 自动 控制 高 度 。 这 可 以 让 
内 容 在 浏览 器 和 设备 中 根据 需要 进行 流动 。 

如 果 设置 了 高 度 ， 随 着 内 容 变 多 ， 它 们 
有 可 能 榜 玻 元 素 的 盒子 ， 这 可 能 是 你 预期 之 
外 的 。 在 这 种 情况 下 ， 符 合 标准 的 浏览 器 不 
会 自动 扩大 高 度 ， 它 们 在 你 指定 高 度 时 采用 
EG 
遵循 标准 ， 它 会 扩大 高 度 。 ) 

不 过 ， 刀 有 果 希 望 元 素 至 少 具有 某 一 特 
定 高 度 ， 可 以 设置 min-height。 如 果 内 容 
目 后 变 多 ， 元素 的 高 度 会 自动 按 需 增长 。 
这 是 height 5 min-height 的 区 别 ，width 
和 min-width 也 是 类 似 的 。 

或 许 你 还 有 所 疑虑 ， 实 际 上 ， 很 多 原因 都 
会 导致 内 容 增长 。 你 的 内 容 或 许 来 自 数据 库 、 新 
闻 源 或 由 用 户 生 成 的 内 容 。 同 时 ,访问 者 可 能 增 
大 其 浏览 器 的 字体 大 小 ， 履 盖 你 指定 的 样式 。 


11.8 ”设置 元 素 周围 的 外 边 距 


外 边 距 是 元 素 与 相 邻 元 素 之 间 的 透明 空 
间 (参见 图 11.8.1 和 图 11.8.2 ) 。 关 于 它 与 元 
素 边 框 和 内 边 踊 的 关系 ， 参 见 11.5 节 。 











#container { 
background: url(../img/bg-bluebench.jpg) 
' repeat-y; 
margin: 20px auto; 
max-width: 950px; 
width: 90%; 
} 


图 11.8.1 





主要 的 外 边 距 调整 是 对 container div 的 。 
两 个 值 ， 第 一 个 应 用 于 上 下 外 边 
于 左右 外 边 距 。 我 们 将 上 下 外 边 距 






































设 为 20px， 为 设计 留 出 一 些 空间 。 如 果 为 container 
显 式 地 设置 了 宽度 ， 再 将 左右 外 边 距 设 为 auto， 就 


会 让 页 面 在 浏览 


























里 水 平 居中 显示 ， 人 参见 图 11.8.2 
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the hospital itself dates from the 14th century. IL 
rds annm npatients yearly, al x ng with more than gl 
3. 000 emergency room... |] 


图 11.8.2 将 外 边 距 设 为 auto 会 将 container div 
没有 使 用 的 占 浏览 器 窗口 宽度 10% 的 空间 平分 给 
左右 外 边 距 ， Meus 局 在 窗口 里 居中 。 (不 必 担 
心 落 在 页 面 左 侧 的 列表 项 目 符号 ， 我 们 在 本 章 随 后 
部 分 将 对 它们 进行 处 理 。 ) 


| | 
The Saint Paul Hospital at the 2o Ue di Avenue in the | 
i 
i 
u 























设置 元 素 外 边 距 的 方法 
输入 margin: x， 其 中 的 x 是 要 添加 的 空 








间 量 ， 可 以 表示 为 长 度 、 相 对 父 元 素 宽度 的 
百分数 或 auto。 


如 果 对 margin 使 用 一 个 值 ， 这 个 值 就 
会 应 用 于 全 部 四 个 边 。 如 果 使 用 两 个 值 ， 那 么 
前 一 个 值 会 应 用 于 上 下 两 边 ， 后 一 个 值 会 应 用 
于 左右 两 边 ( 如 图 11.8.1 所 示 )。 如 果 使 用 三 个 值 ， 
那么 第 一 个 值 会 应 用 于 上 边 ， 第 二 个 值 会 应 用 
于 左右 两 边 ， 第 三 个 值 会 应 用 于 下 边 。 如 果 使 
用 四 个 值 ， 那 么 它们 会 按照 时 钟 顺序 ， 依 次 应 


用 于 上 、 右 、 下 、 左 四 个 边 (参见 图 11.8.3 ) 。 


还 可 以 为 margin 属性 添加 以 下 后 
2, prts ne 于 一 个 边 : -top、 
-bottom、-left 或 -right (如 图 11.8.3 所 示 ) 。 
在 margin 和 后 级 之 间 不 应 有 任何 空格 ( 例如 ， 
margin-top: 10px) 。 


margin 属性 的 auto 值 依赖 于 width 
属性 的 值 (参见 11.7 节 ) 。 





h1 { 
font-size: 1.5em; /* 24px/16px */ 
margin-bottom: .75em; 
text-transform: lowercase; 


J 

aside h2 { 
font-size: .9375em; /* 15px/16px */ 
margin-bottom: 3px; 
text-transform: lowercase; 

} 


#masthead { 
margin-bottom: 30px; 


} 
#footer { 

margin-top: 10px; 
} 


.entry { /* 博客 片段 */ 
margin: 0 .5em 2em 0; 


} 


.continued { 
font-style: italic; 
margin-top: -5px; 


} 


#related ( /* 侧 栏 */ 
margin-left: 72%; 








} 


11.8.3 MJ div (标记 id="related" ) 的 左 外 
边 距 为 72%， 这 比 宽度 为 71% 的 主要 内 容 div Ip 
离 左 侧 的 距离 更 大 。 在 为 侧 栏 设置 浮动 之 前 ， 它 仍 
会 显示 在 主要 内 容 div 的 下 面 (如 图 11.8.4 所 示 ) 。 
我 为 其 他 一 些 元 素 也 设置 了 外 边 距 ， 让 它们 有 一 些 
呼吸 空间 ， 如 报头 下 边 、 页 脚 上 边 以 及 部 分 博客 项 
目的 右边 和 下 边 ( 参见 图 11.8.5 ) 





ABD 如 果 元 素 位 于 另 一 个 元 素 的 上 面 ， 对 
于 相互 接触 的 两 个 margin ( 即 元 素 相 互 接触 的 
下 外 边 距 和 上 人 外边 距 ), 仅 使 用 其 中 较 大 的 一 个 ， 


另 一 个 外 边 距 会 被 登 如 。 左 右 外 边 距 不 登 加 。 
外 边 距 不 是 继承 的 。 
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Quiet returns. And the refrigerator was empty, so off | set 
on my way to the market. The plan was homemade sushi 
with friends so | made the trip down to the central 
Barcelona market: the Boqueria. 


Market Day E 
June 23, 2011 | 


| never get tired of coming here. There are rows and 
rows of busy stalls with fresh fruit and vegetables, and 
spices and nuts. And more than a couple of crazy tourists 
like me taking pictures. | confuse the locals by talking to 
them in Catalan, but... 


ontinued 


from my window 
Around the corner from our 
72% apartment there js a mosaics 
E J> studio, lost year and the year. 
before, | walked by and looked. 
in wistfully, thinking how cool? 


侧 栏 现在 距离 左边 缘 的 距离 为 72% 














11.8.4 





Uu 
photobarcelona... tret 
home 
» about 
e resources 
e archives 





recent entries 


Hospital Sant Pau | 
June 26, 2011 
- ] 





The Saint Paul Hospital at the top of Gaudí Avenue in the 
Sagrada Família neighborhood is an oft-overlooked gem 
of modernist architecture. Although the building was i 


11.8.5 现在， 一 些 元 素 的 周围 多 出 了 一 些 空间 











我 为 更 多 元 素 ( 比 图 11.8.1 和 图 11.8.3 
bruceontheloose.com/htmlcss/examples/ 


chapter-11/finished-page.html o 


11.9 ”在 元 素 周围 添加 内 边 距 


顾名思义 ， 内 边 距 就 是 元 素 内 容 周 围 、 
边框 以 内 的 空间 。 根 据 上 文 的 类 比 ， 内 边 距 
就 像 是 图 画 ( 内容 ) 与 画 框 (边框 ) 之 间 的 
衬 边 。 可 以 改变 内 边 距 的 厚度 ( 如 图 11.9.1、 
图 11.9.3 和 图 11.9.5 所 示 ) ， 不 能 改变 它 的 
颜色 或 纹理 ,但 元 素 的 背景 颜色 和 背景 图 像 
将 显示 在 内 边 距 的 空间 里 ( 如 图 11.9.2、 











11.9.4、 图 11.9.6 和 图 11.9.7 所 示 ) o 





#container { 
background: url(../img/bg-bluebench.jpg) 
* repeat-y; 
margin: 20px auto; 
max-width: 950px; 
width: 9096; 
padding: 30px 10px 0 0; 


} 











11.9.1. ANAE, "n padding 设置 四 
个 值 ， 那 么 它们 分 别 表示 上 、 右 、 下 、 左 (按时 钟 
顺序 ) 内 边 距 。 因 此 在 这 里 只 有 上 边 和 右边 有 内 边 
WE (实现 结果 如 图 11.9.2 所 示 ) 
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þ about 
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11.9.2 X container div 添加 内 边 距 之 后 ， 其 
外 边 距 和 内 容 (在 这 个 例子 中 为 page div) 之 间 
就 产生 了 一 些 空间 ( 因为 边框 默认 为 0) 。 因 此 ， 

container 背景 图像 露出 来 的 部 分 又 多 了 一 些 








C 





#page { 
background: #fef6f8; 
max-width: 940px; 
padding: 10px 10px 10px 0; 
width: 97.9167%; /* 940px/960px */ 
} 


E 11.9.3 现在 , Jy page div 的 内 容 添加 内 边 距 。 只 
有 上 、 右 、 下 三 个 边 设 置 了 内 边 中 8， 左 边 没 有 设置 




























HAV ë a 
photobarcelona... seteno vaen nm | 


home 
þ about 
M resources 
þ archives 








recent entries 


11.9.4 ”我 们 为 page div 添加 了 内 边 距 ， 因 此 可 
以 注意 到 photobarcelona 和 上 边缘 之 间 多 出 了 10 像素 
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iipage { 
background: #fff; 
padding: 10px 10px 10px 0; 
max-width: 940px; 
width: 97.916796; /* 940px/960px */ 
} 


.sidebar { 
background: #f5f8fa; 
padding: 10px; 


.archive ol { 
[* KIARA HAFAN * 
list-style: disc; 
/* 对 圆 点 进行 缩 进 */ 
padding-left: 18px; 











图 11.9.5 ”我 将 页 面 的 临时 背景 颜色 改 成 了 白色 
(#fff ) (如 图 11.9.6 所 示 ) 。 同 时 ， 我 为 侧 栏 的 
四 个 边 都 添加 了 一 些 内 边 距 ， 让 内 容 不 至 于 挨 到 边 
上 ;为 有 序列 表 的 左边 添加 了 内 边 距 ， 让 列表 项 目 
符号 有 一 些 缩 进 ( 如 图 11.9.7 所 示 ) 。 (关于 列表 
的 更 多 信息 ， 人 参见 第 15 T.) 














home 

| about 

| resources 

e archives 
Search: | architecture, Gaudi, etc 


photobarcelona... trt | 











recent entries i 





11.9.6 ^ page 的 背景 设 成 白色 时 ， 就 可 以 很 
清楚 地 看 到 为 什么 左边 不 需要 添加 内 边 距 。 我 还 做 
了 其 他 一 些 内 边 距 调整 ， 读 者 可 以 在 本 书 网 站 的 代 
码 文 件 中 找到 














在 元 素 周围 添加 内 边 距 的 方法 

输入 padding: x， 这 里 的 x 是 要 添加 的 
空间 量 ， 表 示 为 带 单 位 (通常 为 em 或 像素 ) 
的 长 度 或 父 元 素 宽度 的 百分比 (如 20% ) 。 





from my window 

Around the corner from our apartment 
there is a mosaics studio, Last year and 
the year before, | walked by and looked. 
in wistfully thinking how cool it would 
be to make some of the incredible 
mosaics they have displayed. 


This year, | signed up. it's a 22 hour. 
workshop, spread into 2 hour chunks. 
Pve been going Monday and Wednesday 
mornings, and it's been great, Pve 
learned how to cut ceramic tiles and 
also “gres” (their word for sandstone, 
and refers to a matte tile) and how to 
fit them together, Pve got a bunch of 
ideas for more projects. 
So, the other day we make our annual 
pilgrimage to the Sagrada Familia, and 
my favorite part is always watching 
what they're working on, and there in 
the middle of the work area is a small 
pile of green and gold mosaic triangles, 
just like the ones Pve been cutting... 
continued 


archive 
* May2011 
e Apr2011 
e Mar2011 
e Feb 2011 
e Jan2011 
More from the archive 











11.9.7” 侧 栏 的 背景 颜色 显示 在 图 11.9.5 中 四 个 
边 上 添加 的 10 像素 宽 的 内 边 距 空间 里 





同 margin 属性 一 样 ， 对 于 padding 属 
性 ， 如 果 使 用 一 个 值 ， 那 么 指定 的 内 边 距 将 
完全 一 样 地 应 用 于 四 个 边 ( 如 图 11.9.5 所 示 )。 
如 果 使 用 两 个 值 ， 那 么 第 一 个 值 将 应 用 于 上 
下 内 边 距 ， 第 二 个 值 将 应 用 于 左右 内 边 距 。 
如 果 使 用 三 个 值 ， 那 么 第 一 个 值 将 应 用 于 上 
内 边 距 ， 第 二 个 值 将 应 用 于 左右 内 边 距 ， 第 
三 个 值 将 应 用 于 下 内 边 距 。 如 果 使 用 四 个 值 ， 
那么 它们 将 按照 时 钟 顺序 依次 应 用 于 上 、 右 、 
下 、 左 内 边 距 (如 图 11.9.1 和 图 11.9.3 所 示 ) 。 


还 可 以 为 padding 属性 添加 以 下 后 
级， 从 而 仅 将 内 边 距 应 用 于 一 个 边 : -top、 
-bottom, -left 或 -right, Æ padding 和 后 级 
之 间 不 应 有 任何 空格 (例如 ，padding-right: 
1em) 。 
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GHNES ALERTAK, 


11.10 ”使 元 素 浮动 


可 以 使 元 素 浮 动 在 文本 或 其 他 元 素 上 。 
可 以 使 用 这 种 技术 让 文本 环绕 在 图 像 周 围 (如 
图 11.10.1 和 图 11.10.2 所 示 ) ， 或 者 创建 多 
栏 布局 ， 等 等 。 











.photo { 
float: left; 
height: 75px; 
width: 100px; 








} 








图 11.10.1 ”如果 让 元 素 浮动 到 一 边 ， 内 容 通 常会 
显示 在 文档 流 中 该 元 素 后 面 的 位 置 。 这 里 ,我 让 图 
像 容器 CH? class="photo" 的 p 元 素 ) 向 左边 浮动 ， 
从 而 让 博客 条 目的 介绍 文本 围绕 在 它 劳 边 。 ( 也 可 
以 直接 向 img 元 素 应 用 float 属性 。 ) 如 图 11.10.2 
所 示 ， 如 果 文 本 的 高 度 大 于 图 像 的 高 度 ， 文 本 会 环 
绕 在 图 像 周 围 。 这 种 效果 在 很 多 情况 下 是 符合 预期 
的 ， 但 对 于 这 个 页 面 ， 我 想 让 文本 垂直 显示 下 去 ， 

不 管 它 有 多 长 。 为 此 ， 我 为 文本 添加 了 一 定 的 左 外 
边 距 (参见 图 11.10.3 ) 




























































































recent entries 


Hospital Sant Pau 
June 26, 2011 


l| The Saint Paul Hospital at the top of Gaudí Avenue in the Sagrada Familia 
neighborhood is an oft-overlooked gem of modernist architecture. 
Although the building was begun in 1902 under the direction of the 

* architect Lluís Domenec i Montaner, the hospital itself dates from the 
14th century. It serves some 34,000 inpatients yearly, along with more than 150,000 
emergency room... 





Cathedral Cloister 
< June 24, 2011 


[i Outside it feels like a battle is raging, with firecrackers going off left and 
y right in honor of Sant Joan, but in the cloister of Barcelona's 12th century 
Cathedral, it's quiet enough to hear the trickle of the water from the 
fountain. As everywhere else in Barcelona, Saint George is slaying his 
dragon here. Somehow... 








[* 这 个 类 位 于 既 包 含 介绍 性 文字 , 又 包含 
> Continue 链 接 的 div 上 */ 
.intro { 
margin: -5px 0 0 110px; 
} 














continued 





11.10.2 由 于 .photo 容器 向 左 浮动 ， 文 本 会 沿 
着 它 的 周围 进行 排列 。 随 着 文本 不 断 变 长 ， 它 会 环 
绕 在 图 像 的 周转 








11.10.3 ”通过 为 包围 文本 的 容器 设置 110px 的 
左 外 边 距 ， 文 本 将 显示 在 远离 左边 缘 的 位 置 ， 哪 怕 
它 的 高 度 大 于 图 像 的 高 度 。 因 此 ， 文 本 将 不 再 环绕 
在 图 像 的 周围 (参见 图 11.10.4 ) 。 此 外 ， 我 还 为 文 
本 添加 了 -5px 的 上 外 边 距 ， 从 而 让 它 与 左 侧 图 像 
的 上 边缘 对 齐 





























recent entries 


Hospital Sant Pau 

: June 26, 2011 
Wi! The Saint Paul Hospital at the top of Gaudí Avenue in the Sagrada Familia 
neighborhood is an oft-overlooked gem of modernist architecture. 
Although the building was begun in 1902 under the direction of the 
architect Lluís Domènec i Montaner, the hospital itself dates from the 
14th century. It serves some 34,000 inpatients yearly, along with more 
than 150,000 emergency room... 





ontinued 


Cathedral Cloister 
June 24, 2011 
~ Outside it feels like a battle is raging, with firecrackers going off left and 
K right in honor of Sant Joan, but in the cloister of Barcelona's 12th century 
Cathedral, it's quiet enough to hear the trickle of the water from the 
fountain. As everywhere else in Barcelona, Saint George is slaying his 
dragon here. Somehow... 





ontinued 


11.10.4 介绍 文字 不 再 进行 环绕 。 接 下 来 会 使 
main div 浮动 (参见 图 11.10.5 ) ， 从 而 让 侧 栏 显 
示 在 它 的 旁边 (如 图 11.10.6 所 示 ) 














让 文本 环绕 元 素 

(1) 输入 float: o 

(2) 输入 left， 让 元 素 浮动 到 左边 ， 其 
fit A EHE Ze EE dx) (参见 图 11.10.1 ~ 
11.10.7) ; 

或 者 输入 right， 让 元 素 浮动 到 右边 ， 其 
他 内 容 围 绕 在 它 左 边 ; 

或 者 输入 none, 让 元 素 完全 不 浮动 ,( none 
是 默认 值 ， 因 此 只 有 在 特定 情况 下 需要 覆盖 
某 个 浮动 元 素 的 样式 规则 时 才 需 要 用 到 它 。) 

(3) 使 用 width 属性 显 式 地 设置 元 素 的 宽 
度 (参见 11.7 节 ) 。 
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main ( 
float: left; 
width: 7196; 

) 


/* 我 们 之 前 已 经 对 侧 栏 设置 了 这 个 外 边 距 */ 
#related { 
margin-left: 72%; 








} 


11.10.5 ”现在 ,使 用 相同 的 方法 让 主体 内 容 向 
左 浮动 ， 从 而 让 侧 栏 显示 在 它 旁 边 。 ( 前面 通过 为 
侧 栏 设置 左 外 边 距 , 已 将 它 推 到 右 侧 ， 但 仍 显示 在 
主体 内 容 的 下 方 。 ) 
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Hospital Sant P. 











Market Day 
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talking to them i „ua bout this photoblog = 


1nsenotobos te oreet or a woor 








11.10.6 XÆ, main div 向 左 浮动 ， 因 此 侧 栏 
得 以 靠 在 main div 的 右 侧 。 事 实 上 ， 页 脚 也 会 这 
FÉ (参见 图 11.10.7 ) ， 因 为 它 在 HTML 中 紧 跟 在 
侧 栏 后 面 。 (在 下 一 节 里 ， 我 们 会 让 页 脚 回 到 它 该 
有 的 位 置 。 ) 注意 ， 并 不 一 定 要 给 侧 栏 (#related ) 
设置 很 大 的 左 外 边 距 以 产生 浮动 效果 ， 正 如 让 博客 
文本 浮动 在 图 像 容 器 周围 时 也 不 必 这 样 做 (参见 
11.10.1 和 图 11.10.2) 。 但 是 类 似 于 图 11.10..3 
和 图 11.10.4 中 避免 环绕 的 做 法 ,设置 左 外 边 距 可 
以 防止 在 侧 栏 文本 的 高 度 大 于 main div 的 高 度 时 
侧 栏 内 容 环绕 在 main div 的 下 方 。 同 时 ， 如 果 不 
为 侧 栏 设 置 左 外 边 距 ， 它 的 背景 颜色 将 平 铺 到 整个 


main div 
































Market Day 








5 on hend a etter to Greate Carmore, $6 Homara Street, ry 


11.10.7 ”由 于 main div 向 左 浮动 ， 因 此 所 有 其 
他 的 元 素 ( 包括 页 脚 ) 都 会 环绕 在 它 的 周围 ， 除 非 
进行 其 他 设置 。 下 一 节 将 对 这 些 设置 进行 讲解 








记 住 ， 你 选择 的 方向 是 应 用 于 需要 浮 
动 的 元 素 的 , 而 不 是 应 用 于 环绕 它 的 元 素 的 。 
在 使 用 float:left 时 ， 页 面 的 其 他 部 分 围绕 在 


对 于 某 些 元 素 ( 如 短语 内 容 ) ， 如 果 
不 显 式 地 设置 宽度 ,它们 将 无 法 正确 地 浮动 。 


float 属性 不 是 继承 的 。 


11.11 ”控制 元 素 浮动 的 位 置 


可 以 控制 元 素 能 够 浮动 在 哪些 元 素 的 旁 
边 ， 以 及 不 能 浮动 在 哪些 元 素 的 旁边 。 要 阻 
止 元 素 浮动 在 不 合适 的 元 素 旁 边 ， 可 以 使 用 
clear 属性 。 


控制 元 素 浮动 位 置 的 步 又 

(1) 输入 clear: (如 图 11.11.1 和 图 11.11.2 
所 示 ) o 

(2) 输入 left， 阻 止 元 素 浮 动 在 该 元 素 的 
左边 (参见 图 11.11.3 ) ; 

输入 right, FH IE ZU ZR TF I) TE VA 7C 28 HJ 











右边 ; 
输入 both， 阻 止 元 素 浮 动 在 该 元 素 的 左 
右 两 边 ; 

输入 none， 人 允许 元 素 浮 动 在 该 元 素 的 左 
右 两 边 。 
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#footer { 
clear: both; 
margin-top: 10px; 


} 











图 11.11.1 在 11.10 节 可 以 看 到 页 脚 环绕 在 浮动 的 
main div 周围 。 这 里 ， 为 页 脚 设置 clear: both; 
六 阻止 上 述 情况 (参见 图 11.112)。 也 可 以 使 
用 clear: left; 因为 唯一 需要 担心 的 浮动 元 素 是 
回 左 浮动 的 。 但 是 ， 对 两 边 都 进行 清理 并 没有 坏 
处 ， 而 且 ， 随 着 设计 越 来 越 复杂 ， 这 样 做 也 比较 
方便 









































Market Day ux 


Q. 
e t 
d 
1 
couple 








about this photoblog " 
. | 





图 11.11.2 clear 属性 指示 的 是 设置 该 属性 的 元 素 
(在 这 个 例子 中 是 页 脚 ) 不 能 环绕 在 浮动 元 素 的 劳 
边 ， 而 要 显示 在 浮动 元 素 的 后 面 











logo { 
float: left; 
font-size: 2.5em; /* 40px/16px */ 
margin: 0; 


} 


[* 这 个 div 既 包围 主导 航 ， 又 包围 搜索 表单 */ 
#masthead div { 
float: right; 











} 
[* mu 站 点 导航 :::: */ 
.nav li { 
float: left; 
font-size: .75em; /* 12px/16px */ 
padding: O 25px O 3px; 
} 
11.11.3 ”在 为 报头 设置 样式 时 ,标志 ( 包括 标语 








是 向 左 浮动 的 。 包 围 主导 航 和 搜索 框 的 div 是 向 右 
浮动 的 。 在 该 div 中 ， 每 个 导航 列表 项 目 都 是 向 左 
浮动 的 ， 从 而 让 每 个 项 目 都 可 以 显示 在 相 邻 项 目的 
旁边 ， 而 不 是 竖 直 排列 


Hu 














R 











应 该 将 clea 属性 添加 到 不 希望 环绕 
浮动 对 象 的 元 素 上 (参见 图 11.11.4、 图 11.11.5 
和 图 11.11.6) 。 因 此 ， 如 果 要 让 一 个 元 素 在 右 
侧 没 有 浮动 元 素 ( 以 及 任何 靠 向 右 侧 的 元 素 ) 
之 后 才 显 示 ， 就 为 它 添加 clear: right; (而 
不 是 为 浮动 的 元 素 添加 此 样式 规则 ) 。 
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11.31.4. 大 部 分 报头 的 布局 都 是 好 的 ， 只 是 报 
头 下 面 的 内 容 ( 特别 是 侧 栏 ) 因为 foat 而 向 上 移 
动 了 一 些 。 这 是 因为 报头 包含 的 元 素 (header ) 的 
高 度 变 小 了 一 些 ， 因 为 计算 元 素 高 度 时 不 把 其 中 的 
浮动 元 素 包 含 在 内 























«div id="container"> 
«div id-"page"» 
«header id-"masthead" role-"banner" 
' class-z"clearfix'"» 


«/header» 


«div id-"main" role-"main"» 





«/div» 








图 11.11.5 “为 清除 报头 的 foat， 从 而 让 主体 内 容 
和 侧 栏 div 不 紧 靠 着 它 ， 可 以 在 主体 内 容 和 侧 栏 外 
面 再 添加 一 层 div, 并 为 其 设置 clear: both; 不 过 ， 
要 让 HTML 尽 可 能 简洁 ， 这 样 做 并 不 理想 。 另 一 
种 流行 的 解决 方案 是 使 用 clearfix。 使 用 这 种 方法 ， 
需要 做 的 只 是 为 报头 应 用 class="clearfix"。 假 定 
在 样式 表 中 已 经 为 .clearfix 设 好 了 样式 ， 问 题 就 
解决 了 (参见 图 11.11.6 ) 。 更 多 细节 信息 参见 “ 清 
除 float 的 其 他 方法 ” 
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i AR AS IAE: BE 
photobarcelona... zs m 


页 面 中 的 标语 由 一 个 span 包围 。 样 
式 表 中 有 一 条 规则 是 .logo span { display: 
block; } (但 没有 将 其 显示 出 来 ) 。 这 条 规则 
让 span 显示 在 单独 的 行 ， 就 像 段 落 等 默认 显 
图 11.11.6 clearfix 方法 很 神奇 地 消除 了 报头 的 ” 示 为 块 级 的 元 素 。 更 多 信息 参见 11.19 节 。 
float ， 从 而 让 跟 在 它 后 面 的 内 容 显示 在 它 的 下 方 





recent entries 





























清除 float 的 其 他 方法 

要 清除 报头 的 float， 从 而 让 主体 内 容 和 侧 栏 内 容 不 靠 向 它 (参见 图 11.11.4 ) ， 还 有 其 他 
一 些 方法 。 

overflow 方法 

第 一 种 也 是 最 简单 的 方法 就 是 将 下 面 的 代码 添加 到 样式 表 中 : 


#masthead { 
overflow: hidden; 


} 

(overflow 属性 将 在 本 章 后 面 讲 到 。) 有 时 使 用 overflow: auto; 也 有 效 ， 但 这 样 做 可 能 
会 出 现 一 个 滚动 条 ， 这 显然 是 不 希望 看 到 的 。 在 茶 些 情况 下 ，overflow: hidden; AKARA 
断 ， 对 此 要 多 加 注意 。 对 于 我 自己 的 网 站 ， 我 仅 在 overflow 能 解决 float 问题 的 情况 下 才 使 用 
overflow Zr ik (就 像 这 个 报头 的 问题 就 是 这 种 方法 能 解决 的 ) 。 如 果 这 种 方法 不 能 解决 ， 就 使 
用 clearfix (参见 图 11.11.5) 。 通 常 ， 使 用 clearfix 方法 更 容易 保持 一 致 ， 这 也 是 我 为 什么 在 
示例 中 展示 这 种 方法 的 原因 ( 尽管 它 是 我 最 后 考虑 的 方法 ) 。 

clearfix 方法 

多 年 以 来 ， 由 于 Web 社区 的 贡献 ，.clearfix 的 CSS 已 经 经 历 了 好 几 个 不 同 的 版 本 。 下 
面 的 版 本 来 自 出 色 的 HTML5 Boilerplate( www.html5boilerplate.com ). i£ 7/i E| t Paul Irish RÆ, 
随后 大 量 社区 开发 人 员 为 其 贡献 了 代码 。 推 荐 你 下 载 使 用 。 

该 项 目 核心 成 员 Nicolas Gallagher 贡献 了 下 面 的 clearfix 代码 。 将 它们 复制 到 你 的 样式 表 
中 ， 再 为 包含 float 的 元 素 添加 class="clearfix" 即 可 (参见 图 11115) 。 

.clearfix:before, .clearfix:after ( content: ""; display: table; } 


.Clearfix:after ( clear: both; } 
.clearfix ( zoom: 1; ) 


这 段 代 码 有 一 点 复杂 ， 因 此 这 里 不 再 多 作 解 释 。 相 关 的 解释 与 讨论 参见 http://nicolasgall- 
agher.com/micro-clearfix-hack/ (注意 ， 这 些 讨论 都 很 技术 ) 。 

小 结 

使 用 clear 属性 和 使 用 overflow 或 clearfix 方法 有 一 些 细微 的 差别 。 使 用 clear 时， 该 属性 应 
用 于 不 想 环绕 浮动 元 素 的 元 素 。 对 于 另 两 种 方法 ， 有 关 样 式 则 应 用 于 浮动 元 素 的 容器 或 元 素 本 身 。 
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11.12 ”设置 边框 


可 以 在 元 素 周 于 创建 一 个 边框 ， 并 设置 
它 的 厚度 、 风 格 和 颜色 ， 参 见 图 11.12.1。 如 
果 指 定 了 内 边 距 (参见 11.9 节 ) ， 边框 将 包 
围 在 元 素 内 容 和 内 边 距 的 外 面 。 


1. 定义 边框 风格 

输入 border-style: type， 其 中 的 type 
可 以 是 none dotted ( 点 状 ) 、dashed ( 虚线 ) 、 
solid( 实 线 ) double( 双 线 ) groove( HIF )、 
ridge (jf) , inset ( HH ) 或 outset (1h 
x1) ， 参 见 图 11.12.1。 
































#masthead { 
border-bottom: 2px dotted #1d3d76; 
margin-bottom: 30px; 
padding-bottom: 20px; 


.entry { 
border-right: 2px dashed #b74e07; 
margin: O .5em 2em 0; 


} 


#footer { 
border-top: 2px dotted #b74e07; 
clear: both; 
margin-top: 10px; 








} 


Ed 通过 设置 边框 可 以 为 设计 增添 一 些 亮 
。 在 这 个 例子 中 ,在 报头 下 边 添加 点 状 边框 (元 
六 11.12.2 ) 就 可 以 起 到 这 个 作用 ， 同 时 还 能 帮 


















































助 访问 者 将 报头 同 页 面 其 余部 分 快速 区 分 开 来 
2. 设置 边框 宽度 
border-width: n, ix HA n 是 需要 


的 宽 含 单位 ， 如 4px ) o 


3. 设置 边框 颜色 

输入 border-color: color, ix HH color 
是 颜色 名 称 、 十 六 进 制 值 或 RGB 、HSL、 
RGBA, HSLA 颜色 (参见 7.4 节 的 “CSS 








recent entries from my window 






Hospital Sant Pau 


Cathedral Cloister 
side it feels like a battle is raging, with firecracker 


图 11.12.2 注意 ， 由 于 虚线 右边 框 应 用 于 每 个 
entry section 元 素 而 不 是 main div 元 素 ， 因 此 每 
个 条 目 之 间 都 有 中 断 ,不 同 于 报头 和 页 脚 的 边框 ( 参 
见 图 11.12.3 ) ， 这 里 用 的 是 虚线 




































































talking to them in Catalan, but... 





























11.12.3 ”页 脚 上 边框 采用 了 同 报头 下 边框 相同 
的 样式 (点 状 ) ， 只 是 颜色 不 一 样 。 同 报头 的 下 边 








框 一 样 ， 它 也 能 起 到 从 视觉 上 区 分 页 脚 与 其 他 内 容 
的 作用 








4. 使 用 简 记 法 同时 设置 多 个 边框 属性 
(1) 输入 border, 














D 如 果 需 要 ， 输 入 -top. -right, -bottom 
或 -left 将 边框 效果 限制 在 某 一 条 边 上 

(3) 如 果 需 要 ， 输 入 se 这 里 的 
property 可 以 是 style ( 风格 ) 、width (宽度 ) 
或 color (颜色 ) ， 仅 使 用 单个 属性 设置 边框 。 

(4) S ABE). 





(5) 输入 恰当 的 值 ( 如 前 面 三 小 节 介 绍 的 
那样 ) 。 如 果 跳 过 了 第 (3) 步 ， 则 可 以 指定 所 
有 三 种 边框 属性 ， 也 可 以 指定 三 种 类 型 的 任意 
组 合 ( 如 border:1px solid 和 border-right: 
2px dashed green; ) o WRES (3) 步 中 指定 
了 一 种 属性 ， 则 只 能 使 用 这 种 属性 可 以 接受 的 
值 (如 border-right-style: dotted; ) 。 
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D 边框 不 是 继承 的 。 
f 僵 国 ”各 个 边框 属性 (border-width、border- 


style 和 border-color ) 均 可 接受 一 至 四 个 值 。 
如 果 使 用 一 个 值 , 那么 它 会 应 用 于 全 部 四 个 边 。 
如 果 使 用 两 个 值 ， 那 么 前 一 个 值 会 应 用 于 上 下 
两 边 ， 后 一 个 值 会 应 用 于 左右 两 边 。 如 果 使 用 
三 个 值 ， 那 么 第 一 个 值 会 应 用 于 上 边 ， 第 二 个 
值 会 应 用 于 左右 两 边 , 第 三 个 值 会 应 用 于 下 边 。 
如 果 使 用 四 个 值 ， 那 么 它们 会 按照 时 钟 顺序 ， 
依次 应 用 于 上 、 右 、 下 、 左 四 个 边 。 














Pi 
border: 10px solid red; 
padding: 15px; 
p.ddd { 
border-width: 4px; 
border-style: dotted dashed double 
^ solid; 
} 
p.inset { 
border: 10px inset blue; 
} 
p.outset { 
border: 10px outset green; 
} 
p.groove { 
border: 10px groove purple; 
} 
p.ridge { 
border: 10px ridge orange; 
} 
11.12.4 ”在 这 个 例子 中 ， 我 为 每 个 段落 设置 了 





内 边 距 和 默认 边框 。 然 后 ， 对 第 一 个 段落 设置 了 应 
用 于 四 个 边 的 边框 宽度 ， 并 为 每 个 边 设置 了 不 同 的 
风格 。 对 于 余下 的 四 个 段落 ， 使 用 一 条 声明 并 在 其 
中 重复 10px 比 通过 两 个 属性 分 开设 置 风格 和 颜色 
要 方便 一 些 












































D 妥 让 边框 显示 出 来 ， 至 少 必 须 定义 边 
框 风格 ( 参见 图 11.12.4 和 图 11.12.5 ) 。 如 果 
没有 定义 风格 ， 就 不 会 显示 边框 。 风 格 的 默 
认 值 是 none。 








Border Styles - Mozilla Firefox 


Ele Edt View History Bookmarks Tools Help 





ld. —— 


E Border Styles 





À 5px border from top, right, bottom, left: I 
dotted, dashed, double. 1 











图 11.12.5 各 浏览 器 对 边框 风格 的 人 处理 方式 并 不 
完全 相同 。 这 是 在 Firefox 中 显示 的 不 同 边框 风格 ， 
从 中 可 以 了 解 到 不 同 风格 的 差异 ( 男 见 彩 插 ) 








如 果 使 用 简 记 法 ,如 border X border- 
left 等 ， 则 未 提供 的 属性 将 显示 其 默认 值 。 
因此 ，border: 1px black; 相当 于 border: 1px 
black none;， 这 意味 着 不 会 显示 边框 ( 即便 


在 之 前 使 用 border-style 指定 了 边框 风格 ) 。 


人 鲁 国 ”边框 的 默认 颜色 是 元 素 color 属性 的 
i (参见 10.8 节 ) 。 
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IE7 及 以 下 版 本 无 法 显示 groove, 
ridge、outset、inset 等 双色 调 边 框 风 格 。 它 
们 会 显示 为 solid 风格 。 

border 属性 可 用 于 表格 及 其 单元 格 。 
CSS3 引入 了 border-image 属性 。 除 
Internet Explorer 以 外 ， 浏 览 器 对 它 的 支持 程度 
较 好 (参见 http://caniuse.com/#search=border- 
image) 。 关 于 border-image， 参 见 www.sitepo- 


int.cony/css3-border-image/。 


11.13 ” 偏 移 自然 流 中 的 元 素 


每 个 元 素 在 页 面 的 文档 流 中 都 有 一 个 自 
然 位 置 (参见 图 11.13.1) 。 相 对 于 这 个 原 
始 位 置 对 元 素 进 行 移动 就 称 为 相对 定位 C 如 
图 11.13.2 和 图 11.13.3 所 示 ) 。 周 围 的 元 素 
完全 不 受 此 影响 ( 如 图 11.13.3 所 示 ) 。 








Hospital Sant Pau i 
" June 26, 3011 1 
gai The Saint Paul Hospital at the top of Gaudí Avenue in the Sagrada Familia : 
T i i 
| neighborhood is an oft-overlooked gem of modernist architecture. 
Although the building was begun in 1902 under the direction of the 
architect Llufs Dom&nec i Montaner, the hospital itself dates from the 














图 11.13.1 尽管 日 期 是 右 对 齐 的 ， 但 它 与 标题 位 
于 不 同 的 行 ， 出 现在 标题 的 下 方 ， 而 且 它 与 博客 文 
本 的 距离 也 太 近 了 


.entry .date { 
line-height: 1; 
margin: 0 1em 0 0; 
padding: 0; 
position: relative; 
top: -1em; 











图 11.13.2 记 住 ， 既 要 指明 采用 相对 位 置 ， 还 要 
给 出 偏 移 量 。 可 以 使 用 正 数 ， 也 可 以 使 用 负数 。 使 
用 em 会 使 偏 移 量 的 大 小 与 文本 字体 大 小 成 比例 。 
由 于 lem 等 于 元 素 的 字体 大 小 ,因此 在 这 个 例子 中 ， 
样式 声明 会 让 日 期 向上 移动 一 小 段 距 离 〈 因为 设置 
了 -1em) ， 参见 图 11.13.3 





















































Hospital Sant Pau June 26, 2011 1 
Wa) The Saint Paul Hospital at the top of Gaudí Avenue in the Sagrada Família i 
M neighborhood is an oft-overlooked gem of modernist architecture. i 
Although the building was begun in 1902 under the direction of the 
P. architect Lluís Domènec i Montaner, the hospital itself dates from the 

14th century. It serves some 34,000 inpatients yearly, along with more 


图 11.13.3. ”通过 对 日 期 设置 负数 偏 移 量 ， 使 它 上 
升 到 前 一 个 块 的 空间 里 。 在 这 个 例子 中 ， 这 样 做 使 
日 期 与 标题 对 齐 。 后 续 的 元 素 完 全 不 受 影 响 




















偏 移 自然 流 中 元 素 的 步骤 

(1) 输入 position: relative; (pART 
输入 分 号 ;， 空 格 是 可 选 的 ) 。 

(2) 输入 top, right, bottom 或 left, Ff 
输入 :v， 这 里 的 “是 希望 元 素 从 它 的 自然 位 
置 偏 移 的 距离 , 可 以 表示 为 绝对 值 、 相 对 值 ( 如 
10px 或 2em ) 或 百分数 。 

(3) 如 果 愿 意 ， 重 复 第 (2) 步 ， 添 加 其 他 
方向 上 的 偏 移 量 。 每 个 属性 / 值 对 之 间 用 分 号 
分 隔 。 


ED ”相对 定位 中 的 “相对 ” 指 的 是 相对 于 
元 素 的 原始 位 置 ， 而 不 是 周围 元 素 的 位 置 。 
你 无 法 让 元 素 相 对 于 其 他 元 素 移动 ， 但 可 以 
相对 于 它 的 原始 位 置 移动 。 这 一 点 很 重要 ! 














其 他 元 素 不 会 受到 偏 移 的 影响 ， 它 
们 仍然 按照 这 个 元 素 原来 的 盒子 进行 排列 。 
设置 了 相对 定位 的 内 容 可 能 与 其 他 内 容重 
de, dX XX d F top. right, bottom 和 left 
的 值 。 


使 用 相对 定位 、 绝 对 定位 或 固定 定 
位 时 ， 对 于 相互 重 登 的 元 素 ， 可 以 用 z-index 
属性 指定 它们 的 爱 放 次 序 。 详 细 信 息 参 见 
11.15 节 。 


如 果 不 指定 position 属性 ， 偏 移 量 
将 不 会 起 作用 。 
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对 元 素 设 置 position: static， 可 以 
4E i position: relative iX €. static 是 元 素 
的 默认 值 ， 这 就 是 元 素 出 现在 常规 文档 流 中 
的 原因 。 有 关 示 例 参见 11.15 节 。 


定位 不 是 继承 的 。 


11.14 ”对 元 素 进 行 绝 对 定位 


正如 前 面 提 到 的 ， 网 页 中 的 元 素 通 常 按 

它们 在 HTML 源 代码 中 出 现 的 次 序 进行 排 
= 如 图 11.14.1 所 示 ) 。 也 就 是 说 ， 如 果 
img 元 素 出 现在 p 元素 之 前 ， 图 像 就 出 现在 
段落 的 前 面 。 通 过 对 元 素 进 行 绝对 定位 ， 即 
指定 它们 相对 于 body (参见 图 11.14.2 和 图 
11.14.3 ) 或 最 近 的 已 定位 祖先 元 素 (参见 图 
11.14.4) 的 精确 位 置 ， 可 以 让 元 素 脱离 正常 
的 文档 流 。 
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11.14.1 根据 常规 的 文档 流 次 序 ， 搜 索 框 仍然 
位 于 主导 航 的 下 方 。 我 们 希望 将 它 移 至 包含 它 的 报 
头 的 右上 角 








#masthead form { 
position: absolute; 
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Hospital Sant Pau 

















11.14.3 ”搜索 框 显示 在 距离 body 上 边缘 7 像素 、 
右边 缘 0 像素 的 位 置 





/* 这 个 div 既 包围 搜索 表单 ， 又 包围 主导 航 */ 
itmasthead div { 

float: right; 

position: relative; 


#masthead form { 
position: absolute; 
top: 7px; 
right: 0; 

} 


11.14.4 “为 搜索 框 的 div 容器 设置 position: 
relative;， 从 而 让 搜索 框 相对 于 该 div ( 而 不 是 
body 元 素 ) 进行 绝对 定位 。 这 可 以 让 搜索 框 处 在 























我 们 和 希望 的 位 置 , 但 同时 也 引入 了 另外 一 个 问题 ( 参 
见 图 11.14.5 ) 











recent entries 








现在 ， 搜 索 框 显示 在 距离 其 容器 div 
上 边缘 7 像素 、 右 边缘 0 像素 的 位 置 ( 搜索 框 上 方 
和 右 侧 还 有 为 #page 设置 内 边 距 产生 的 宽 10 像素 
的 留 白 ) 。 不 过 ， 搜 索 框 显示 在 导航 的 上 面 ， 这 不 














top: 7px; 11.14.5 
right: 0; 
11.14.2 通过 对 搜索 框 进行 绝对 定位 ， 让 它 完 





全 脱离 了 文档 流 。 它 不 知道 其 他 内 容 的 存在 ， 其 他 
内 容 也 不 知道 它 的 存在 。 仅 用 这 段 代 码 还 不 能 实现 
目的 ， 因 为 在 没有 另外 进行 指定 的 情况 下 ， 设 置 
position: absolute 的 元 素 是 相对 于 body 进行 定 
位 的 ， 如 图 11.14.3 所 示 





























Af. 前 面 提 到 ， 对 元 素 进行 绝对 定位 以 后 ， 它 就 
会 脱离 文档 流 ， 因 此 导航 仍 显示 在 它 本 来 的 位 置 ， 
就 像 搜索 框 并 不 存在 。 随 后 我 们 将 解决 这 个 问题 ( 参 
见 图 11.14.6 ) 
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对 元 素 进行 绝对 定位 的 步骤 

(1) 输入 position: absolute; (不 要 忘 了 
输入 分 号 ;， 空 格 是 可 选 的 ) 。 

(2) 根据 需要 ,输入 top, right, bottom 
ny left, 
再 输入 : v, 这 里 的 v 是 希望 元 素 相 对 于 
其 祖先 元 素 偏 移 的 距离 ( 如 10px 或 2em ) 或 
相对 于 其 祖先 的 百分比 (有关 解 释 参 见 第 二 
条 提示 ) 。 

(3) 根据 需要 , 对 其 他 方向 重复 第 (2) 步 ， 
照例 用 分 号 分 隔 每 个 属性 / EDGE 

(4) 根据 需要 ， 对 希望 成 为 绝对 定位 参照 
体 的 祖先 元 素 添 加 position: relative ( 如 
图 11.14.4 所 示 ) 。 如 果 跳 过 这 一 步 ( 如 图 
11.14.2 所 示 ) ， 元 素 将 相对 于 body 计算 偏 移 
量 (如 图 11.14.3 所 示 ) o 




















由 于 绝对 定位 的 元 素 脱 离 了 文档 流 ， 
因此 它们 可 能 会 相互 重合 ,或 与 其 他 元 素 重 
5 (参见 图 11.14.6 ) (这 不 一 定 是 坏事 儿 ) 。 





/* 这 个 div 既 包 固 搜索 表单 ， 又 包围 主导 航 */ 
#masthead div { 

float: right; 

position: relative; 


} 


#masthead form { 
position: absolute; 








top: 7px; 

right: 0; 
} 
.nav { 

margin-top: 45px; 
} 





图 11.14.6 |. SLE EA EAMA E ay DUE 
它 推 到 搜索 框 的 下 方 ， 让 并 它 与 标志 中 的 标语 对 齐 
(如 图 11.14.7 所 示 ) 
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11.44.7. 现在， 搜索 框 和 导航 显示 为 我 们 希望 
看 到 的 样子 。 更 好 的 是 ， 当 页 面 变 罕 时， 它们 仍 保 
持 相 对 位 置 不 变 (参见 图 11.14.8 ) 。 这 对 使 用 移 
动 电话 和 其 他 罕 屏 幕 设备 的 访问 者 来 说 是 个 好 消息 
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图 11.14.8 ”由 于 搜索 框 和 导航 都 包含 在 同一 个 
div 中 ， 因 此 它们 是 作为 一 个 整体 进行 移动 的 。 当 








浏览 器 窗口 变 窄 时， 它们 在 译 动 定位 的 标志 下 方 进 
行 滑动 。 由 于 布局 需要 考虑 这 些 情 形 ， 因 此 这 种 体 
验 很 实用 





如 采 不 为 绝对 定位 的 元 素 指定 偏 移 
量 ， 这 个 元 素 将 显示 在 它 的 自然 位 置 上 ， 但 
不 会 影响 后 续 元 素 在 文档 流 中 的 位 置 。 


ED 还 有 一 种 定位 类 型 称 为 固定 定位 。 当 
访问 者 滚动 浏览 器 窗口 时 ， 页 面 内 容 通常 随 之 
上 下 移动 。 如 果 对 元 素 设置 position: fixed;, 
它 就 会 国定 在 浏览 器 窗口 中 。 当 访问 者 上 下 滚 
动 浏览 器 窗口 时 ， 该 元 素 不 会 随 之 移动 ， 页 面 
的 其 余部 分 仍 照 常 滚动 。IE6 不 支持 fxed。 


使 用 相对 定位 、 绝 对 定位 或 固定 定位 
时 ， 可 以 使 用 z-index 属性 指定 相互 重 爱 的 元 
素 的 受 放 次 序 。 详 细 说 明 参 见 11.15 节 。 
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对 元 素 设置 position: static E 
position: absolute; 的 设置 。static 是 元 素 
定位 的 默认 值 ， 这 也 是 元 素 为 什么 出 现在 常 


规 文档 流 中 的 原因 。 有 关 实 例 参 见 11.15 节 。 


ED 


定位 不 是 继承 的 。 


11.15 ”指定 元 素 的 三 维 位 置 


当 你 开始 使 用 相对 定位 、 绝 对 定位 和 固 
定 定 位 以 后 ， 很 可 能 发 现 元 素 相互 重 冯 的 情 
况 , 就 像 上 面 出 现 过 的 搜索 框 和 主导 航 一 样 。 
你 可 以 选择 哪些 元 素 应 该 出 现在 顶层 (参见 
图 11.15.1、 图 11.15.2 和 图 11.15.3 ) o 








<body> 

«div class="box1"> 
<pThis is box 1</p> 

«/div» 


«div class-"box2"» 
<p>This is box 2</p> 
«/div» 


«div class-"box3"» 
<p>This is box 3</p> 
«/div» 


«div class-"box4"» 
<p>This is box 4</p> 





div ( 
background: #ccc; 
border: 1px solid #666; 
height: 125px; 
position: absolute; 
width: 200px; 


} 


.box1 { 
background: pink; 
left: 110px; 
top: 50px; 
z-index: 120; 


} 


.box2 { 
background: yellow; 
left: 0; 
top: 130px; 
z-index: 530; 


.box3 { 
height: auto; 
min-height: 125px; 
position: static; 


/* 对 蛋 放 顺序 的 设置 没有 效果 , 因为 元 素 的 
;定位 方式 不 是 绝对 定位 、 相 对 定位 和 固定 
;定位 中 的 一 种 */ 

z-index: 1000; 


} 


.box4 { 
background: orange; 
left: 285px; 
top: 65px; 
z-index: 3; 


} 














«/div» 
</body> 
</html> 
11.15.1 这 是 一 段 很 简单 的 HTML 代码 ， 





其 样式 表 为 图 11.15.2， 显 示 效 果 如 图 11.15.3 
所 示 





旨 定 元 素 三 维 位 置 的 方法 
输入 z-index: n， 其 中 的 n 是 表示 元 素 
在 定位 过 的 对 象 堆 中 的 层级 的 数字 。 























图 11.15.2 ”对 于 使 用 绝对 定位 ( 或 相对 定位 、 固 
定 定位 ) 的 元 素 ,z-index 最 高 的 数 显示 在 最 上 面 ( 如 
11.15.3 所 示 ) ,不 管 该 元 素 在 HTML 中 出 现 的 
次 序 (如 图 11.15.1 所 示 ) 。 这 也 显示 了 position: 
static; 的 方便 之 处 。 第 一 条 规则 为 所 有 四 个 div 
设置 了 position: absolute;j， 而 定义 .box3 时 又 
覆盖 了 这 一 规则 ， 让 .box3 回 到 默认 的 static, 

这 让 .box3 回归 常规 的 文档 流 ， 因 此 ， 尽 管 它 的 
z-index 值 最 高 ， 但 这 没有 任何 效果 ， 它 总 是 位 于 
最 底层 
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z-index - Mozilla Firefox 
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11.15.3 ”定位 的 盒子 按照 z-index 由 高 到 低 的 
次 序 进行 释放 。 第 三 个 盒子 位 于 最 底层 ， 因 为 它 处 
于 常规 的 文档 流 











z-index 属性 仅 对 定位 过 的 元 素 ( 即 
设 为 绝对 定位 、 相 对 定位 或 固定 定位 的 元 素 ) 
有 效 。 图 11.15.1 仅 包含 绝对 定位 的 元 素 ， 但 
实际 上 可 以 对 绝对 定位 、 相 对 定位 和 固定 定 
位 的 元 素 混合 使 用 z-index, z-index 会 将 它 
们 作为 整体 进行 安排 ,而 不 是 分 别 安 排 。 


z-index 的 值 越 大 ， 元 素 在 堆 中 就 越 
高 (参见 图 11.15.1 和 图 11.15.2 ) 。 


ED RERET z-index hik PEA 
元 素 ， 那 么 这 些 襄 套 的 元 素 首 先 根据 其 自身 
的 z-index 确定 次 序 ， 然 后 作为 一 个 整体 在 更 
大 的 上 下 文中 确定 次 序 。 


CES IE7 及 之 前 的 版 本 无 法 正常 处 理 
z-index， 每 个 定位 的 元 素 都 会 生成 自己 的 排 
序 上 下 文 ， 而 不 是 相对 于 整个 页 面 所 有 定位 
元 素 形 成 的 堆 进行 排序 。 该 问题 的 描述 及 解 
决 方案 参见 http://brenelz.com/blog/squish-the- 
internet-explorer-z-index-bug/, ( 该 方案 使 用 
了 内 联 样式 ， 请 忽略 这 一 点 。 应 该 将 CSS 放 
到 外 部 样式 表 中 。 ) 


z-index 属性 不 是 继承 的 。 
11.16 ”决定 溢出 的 位 置 


元 素 并 不 总 是 包含 在 它们 自己 的 盒子 里 。 
这 可 能 是 因为 盒子 不 够 大 ， 人 例如， 图像 比 它 
的 容器 更 宽 就 会 溢出 ; 也 可 能 是 因为 使 用 负 
的 外 边 距 或 绝对 定位 让 内 容 处 于 盒子 的 外 面 。 
无 论 是 哪 种 情况 ， 都 可 以 使 用 overflow 属性 控 
制 元 素 在 盒子 外 面 的 部 分 。 


决定 浏览 器 如 何 处 理 溢 出 的 步骤 

(1) 输入 overflow: 。 

(2) 输入 visible， 让 元 素 的 盒子 进行 
扩展 以 适应 其 内 容 。 这 是 默认 项 (参见 图 
11.16.1) ; 

或 者 输入 hidden， 隐 藏 元 素 的 盒子 容纳 
不 了 的 内 容 (参见 图 11.16.2 和 图 11.16.3 ) ; 

或 者 输入 scrfol1， 从 而 总 是 在 元 素 上 添 
加 滚动 条 ， 让 访问 者 可 以 通过 滚动 条 看 到 溢 
出 的 内 容 (参见 图 11.16.4 和 图 11.16.5 ) ; 

或 者 输入 auto， 让 滚动 条 仅 在 需要 的 时 
候 出 现 。 


CE 实 或 中 我 并 不 装 成 像 示例 那样 隐藏 图 
像 ， 因 为 让 用 户 可 以 看 到 它们 更 合适 ， 不 管 
浏览 器 的 宽度 是 多 少 ( 记 住 ， 移动 电话 和 平 
板 电 脑 的 屏幕 较 罕 ) 。 由 于 示例 中 的 修改 仅 
作 演 示 用 ， 因 此 我 在 本 书 网 站 上 的 完整 代码 
中 去 掉 了 height 和 overflow 声明 。 同 时 ， 我 
不 会 再 像 示例 那样 在 所 有 页 面 引 入 这 么 多 图 
像 ， 因 为 加 载 这 些 图 像 是 很 大 的 负担 。 在 示 
例 中 这 样 做 只 是 出 于 演示 的 目的 。 











CES overflow 属性 还 可 以 很 方便 地 清除 
float。 参 见 11.11 节 的 “清除 float 的 其 他 方法 ”。 
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about this photoblog 


This photoblog is the product of a love of computers, 
photography, and Barcelona. If you're interested in any of 
my photos, please contact me, The photographs on these 
pages are licensed under the Creative Commons 
Attribution-NonCommercial-NoDerivs License. To view a 
copy of this license, visit http: / /creativecommons.ore / 
licenses /by-nc-nd /2.5/ ; ot, (b) send a letter to Creative 
Commons, 543 Howard Street, 5th Floor, San Francisco, 
California, 94105, USA., 











图 11.16.3 现在， 超出 范围 的 图 像 被 隐藏 了 。 如 
果 扩 大 浏览 器 窗口 ， 这 一 行 就 会 显示 更 多 的 图 像 。 
下 面 将 演示 另 一 种 方法 (参见 图 11.16.4) ， 在 这 
个 例子 中 效果 并 不 好 (如 图 11.16.5 所 示 ) 
































多 行 显示 。 这 通常 是 好 事 ， 因 为 我 们 希望 内 容 可 
以 适应 不 同 的 环境 。 不 过 ， 为 了 演示 overflow] 
性 的 处 理 机 制 ， 我 们 将 临时 地 修改 这 一 行为 (如 
图 11.16.2 和 图 11.16.3 所 示 ) 























-thumbnails { 
height: 33px; 
overflow: hidden; 





} 


图 11.16.2 为 了 总 是 在 一 行 之 内 显示 图 像 (不 管 
浏览 器 的 宽度 ) ， 我 们 将 ul 元 素 的 高 度 设 为 这 些 
图 像 中 高 度 最 大 的 图 像 的 高 度 ， 并 设置 overflow 属 
性 为 hidden 

















注意 ， 当 子 元素 比 父 元 素 大 的 时 
候 ，IE6 会 错误 地 将 父 元 素 扩 展 到 跟 子 元 素 


一 样 大 。 唯 一 的 例外 是 将 overflow pistes 
visible ( RIAA ) 以 外 的 值 ， 在 这 种 情况 下 
父 元 素 会 变 回 它 的 正常 大 小 ， 并 让 niin 属 


性 发 挥 作 用 。 


overflow 属性 的 默认 值 是 visible, 
overflow 属性 不 是 继承 的 。 


.thumbnails { 
height: 33px; 
overflow: auto; 





} 


图 11.16.4 如 果 要 让 图 像 的 可 视 区 域 仍 限制 在 
一 行 以 内 ， 同 时 让 访问 者 可 以 通过 滚动 条 看 到 显 
示 为 多 行 的 图 像 ( 如 图 11.16.5 所 示 ) ， 可 以 使 用 
overflow: auto;, ， 同 时 结合 前 面 设置 的 高 度 
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11.16.5 ”这 是 将 滚动 条 拖 到 最 后 一 行 附近 的 样 
式 。 显 然 ， 这 种 效果 用 在 这 里 并 不 合适 。 尽 管 为 容 
器 设置 了 更 大 的 高 度 ， 但 这 种 技术 在 某 些 情形 下 可 
能 很 方便 
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11.17 ”垂直 对 齐 元 素 


可 以 使 用 除 默 认 方式 以 外 的 多 种 方式 对 
齐 元 素 ， 让 它们 在 页 面 上 显得 较为 整齐 (如 
图 11.17.1、 图 11.17.2 和 图 11.17.3 所 示 ) o 








licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 


send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Franci 





11.17.1 ”图 像 默认 对 齐 行 的 底部 





.thumbnails img { 
vertical-align: middle; 
} 

















图 11.17.2 注意， 对齐 是 对 图 像 本 身 设置 的 ， 而 
不 是 对 包含 图 像 的 列表 项 目 (1i ) 设置 的 。 (关于 
列表 ,参见 第 15 章 。 ) 














licensed under the Creative Commons Attribution-NonCommercial-MoDerivs L| 
send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Franci 


图 11.17.3 现在， 图 像 对 齐 行 的 中 线 

















使 元 素 垂 直 对 齐 的 步骤 

(1) 输入 vertical-align:。 

(2) 输入 baseline， 使 元 素 的 基准 线 对 齐 
父 元 素 的 基准 线 ; 

或 者 输入 middle， 使 元 素 的 中 线 对 齐 父 
元 素 的 中 线 ; 

或 者 输入 sub, 使 元 素 成 为 父 元 素 的 下 标 ; 

或 者 输入 super, 使 元 素 成 为 父 元 素 的 上 标 ; 

或 者 输入 text-top， 使 元 素 的 顶部 对 章 








父 元 素 的 顶部 ; 
或 者 输入 text-bottom， 使 元 素 的 底部 对 
齐 父 元 素 的 底部 ; 





或 者 输入 top， 使 元 素 的 顶部 对 齐 当 前 行 
里 最 高 元 素 的 顶部 ; 


或 者 输入 bottom， 使 元 素 的 底部 对 齐 当 
前 行 里 最 低 元 素 的 底部 ; 

或 者 输入 元 素 行 高 的 百分比 ， 可 以 是 正 
数 ， 也 可 以 是 负数 。 


JED vertical-align 属性 仅 对 显示 为 行内 
元 素 的 元 素 有 效 ， 对 显示 为 块 级 元 素 的 元 素 无 
效 。 更 多 细节 参见 Chris Coyier 的 解释 : http:// 
css-tricks.com/what-is-vertical-align/。 


11.18 ”修改 鼠标 指针 


一 般 情 况 下 ， 浏 览 器 负责 控制 鼠标 指针 
的 形状 。 大 多 数 时 候 使 用 箭头 形状 ， 指 向 链 
接 时 使 用 手指 形状 (参见 图 11.18.1 ) ， 等 等 。 
使 用 CSS 可 以 修改 指针 的 形状 (如 图 11.18.2 
和 图 11.18.3 所 示 ) o 








from my window 





11.18.1 指向 Home 链接 时 ， 指 针 变 成 手指 形 
状 ， 同 时 链接 高 亮 显 示 。 对 于 其 他 链接 也 是 这 样 








a.current ( 
color: #1d3d76; 
} 


a:hover.current { 
background: white; 
cursor: default; 


} 











11.182 ” 当 访 问 者 位 于 主页 时 ， 我 为 home 链 
接 添 加 了 class="current"。 这 样 就 修改 了 home $t 
接 的 鼠标 停留 状态 的 颜色 、 指 针 和 背景 颜色 ， 让 它 
看 起 来 不 像 是 链接 ( 另外 ， 在 这 个 例子 中 ， 也 可 以 
在 导航 中 去 掉 home 链接 周 于 的 a 元 素 ) 




















11.19 显示 和 隐藏 元 素 219 














from my window 


图 11.18.3 尽管 它 仍 然 是 真正 的 链接 ， 但 它 看 起 
来 已 不 像 是 链接 。 访 问 者 正 位 于 这 个 链接 指向 的 页 
看 ， 因 此 这 样 做 是 有 意义 的 


























修改 指针 形状 的 步骤 

(1) 输入 cursor:。 

(2) 输入 pointer 表示 停留 在 链接 上 时 通 
第 显示 的 指针 形状 (出 ) 或 default 表示 箭头 
(R), WEHA crosshair (十 ) 、 
wait (X) , help (R?) , text ( I) zX progress 

(RE) ; 

或 者 输入 auto 显示 特定 情形 下 通 
的 指针 形状 ; 
或 者 输入 x-resize 显示 双向 箭头 ， 这 里 
的 x 是 其 中 一 个 箭头 需要 指向 的 方向 ， 可 以 
是 n( 北 ) 、nw( 西 北 ) 、e( 东 ) ， 等 等 。 
例如 ，e-resize 指针 显示 成 wy。 


不 同 浏览 器 、 不 同系 统 的 指针 形状 可 
EAmESER. 

















move ( 4») 


常 使 用 





11.19 显示 和 隐藏 元 素 


图 11.19.1 中 的 示例 页 面 可 以 演示 display 

和 visibility 属性 的 差异 。 
display 属性 可 以 用 在 多 个 方面 。 可 以 
盖 元 素 的 自然 显示 方式 ， 如 将 其 从 inline 
改 为 block (参见 图 11.19.2、 图 11.19.3 和 图 
11.19.4 ) ， 或 者 反 过 来 。 还 有 一 种 混合 显示 








方式 称 做 inline-block， 让 元 素 与 其 他 内 容 
出 现在 同一 行 ， 同时 具有 块 级 元 素 的 属性 。 
display 属性 还 可 以 让 元 素 及 其 内 容 不 在 页 面 
上 占据 任何 空间 (如 图 11.19.5 和 图 11.19.6 
所 示 ) 。 此 外 ， 该 属性 还 可 以 是 其 他 的 值 ( 参 
见 提示 ) 。 














<body> 

«img src-"assets/img/top.jpg" width="300" 
> height-"125" alt-"At the top" /> 

«img src-"assets/img/middle.jpg" 
> width-"300" height-"100" alt-"In the 
» middle" class-"hide" /> 

«img src-"assets/img/bottom.jpg" 
> width="300" height-"125" alt-"At the 











» bottom" /> 
</body> 
</html> 
图 11.19.1 这 是 HTML: 三 个 简单 的 img 元 素 。 











中 间 的 img Jy hide 类 ， 这 在 后 面 的 示例 中 会 月 
img 元 素 显示 为 行内 元 素 ( 参见 





panus 





到 。 默 认 情 况 下 ， 
图 11.19.2 ) 




















图 11.19.2 没有 应 用 CSS 时 ， 图 像 挨 着 显示 ， 
因为 img 元 素 拥有 display: inline 的 默认 样式 ， 
就 像 短 语 内 容 元 素 一 样 Cn Su Và fd DI ARTE, 

图 像 就 会 换行 以 适应 新 的 宽度 ) 。 很 容易 通过 修 
改 样式 让 它们 分 别 位 于 单独 的 行 ( 如 图 11.19.3 
所 示 ) 


























img ( 
[* 让 元 素 显示 在 单独 的 一 行 上 */ 
display: block; 











图 11.19.3 ”为 图 像 设置 display: block; ， 它 们 就 
会 显示 在 单独 的 行 ， 就 像 段 落 等 默认 显示 为 块 级 元 
素 的 元 素 那 样 ( 参见 图 11.19.4 ) 
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图 11.19.4 看 起 来 就 像 是 一 个 图 像 ， 但 实际 上 它 
仍 是 来 自 图 11.19.1 的 示例 代码 的 三 个 img 元 素 。 
唯一 的 区 别 是 它们 均 根 据 图 11.19.3 中 的 样式 规则 
显示 为 块 级 元 素 ， 而 不 是 行内 内 容 。 我 让 浏览 器 保 
持 相 同 的 宽度 ， 从 而 可 以 看 到 图 像 显示 在 各 自 的 行 
仅仅 是 由 于 修改 其 display 属性 的 原因 














img ( 
display: block; 


.hide { 
[* 让 这 个 类 的 所 有 元 素 都 不 显示 */ 
display: none; 











图 11.19.5 你 应 该 记得 ， 第 二 个 img 有 一 个 hide 
类 (参见 图 11.19.1 ) 。 当 我 们 设置 hide 为 不 显示 
n ERE 





Example of display: none - Mozilla znixií 


File Edit View History Bookmarks Tools Help 





| 3 Example of display: none 十 








图 11.19.6 = 第 二 个 图 像 没有 留 下 任何 痕迹 ( 我 让 
浏览 器 窗口 变 罕 了 一 些 ， 但 这 不 会 影响 显示 的 结果 ) 





同时 ，visibility 属性 的 主要 目的 是 控 
制 元 素 是 否 可 见 。 与 display 属性 不 同 的 是 ， 
fii H] visibility 隐藏 元 素 时 ， 元 素 及 其 内 容 
应 该 出 现 的 位 置 会 留 下 一 片 空白 区 域 ( 如 图 
11.19.7 和 图 11.19.8 所 示 ) o 


1. 指定 元 素 显示 方式 的 步骤 

(1) 在 样式 表 规 则 中 ,输入 display:。 

(2) 输入 block， 让 元 素 显示 为 块 级 元 素 

( 就 像 开 始 新 的 段落 ) ， 参 见 图 11.19.2、 
图 11.19.3 和 图 11.19.4; 

或 者 输入 inline， 让 元 素 显 示 为 行内 元 
K (不 同 于 开始 新 的 段落 ) ; 

或 者 输入 inline-block， 让 元 素 显 示 为 
行内 元 素 ， 同 时 具有 块 级 元 素 的 特征 ， 即 
可 以 为 元 素 设置 width、height、margin、 
padding 等 属性 ; 

或 者 输入 none， 隐 藏 元 素 ， 并 将 其 从 文档 
流 中 完全 移 除 (参见 图 11.19.5 和 图 11.19.6) 。 

关于 display 属性 的 其 他 值 ， 参 见 提示 。 


2. 控制 元 素 可 见 性 的 步骤 

(1) 在 样式 表 规 则 中 , 输入 visibility:。 

(2) 输入 hidden， 计 元 素 不 可 见 ， 但 在 文 
档 流 中 保留 它 ( 如 图 11.19.7 和 图 11.19.8 所 示 ); 

或 者 输入 visible， 让 元 素 显 示 出 来 。 


如 果 使 用 display: nonej， 那 么 隐 
藏 的 元 素 不 会 在 浏览 器 中 留 下 任何 痕迹 。 没 
有 空白 的 空间 (参见 图 11.19.6) 。 如 果 使 
用 visibility: hidden;, K 5X 8 Æ X 45 Ak 
会 在 文档 流 中 保留 其 所 占据 的 空间 ( 参见 图 
1119.8) o MAHAR ( 包括 后 代 元 素 ) 也 受 
到 同样 的 影响 , 例如， 如果 对 一 个 包含 几 个 p、 
figure 及 img 元 素 的 article 元 素 设 置 display: 
none;, ， 那 么 这 些 元 素 都 不 会 显示 。 如 果 对 该 
article 元 素 设 置 visibility: hidden; ， 就 会 
留 下 一 片 空白 的 空间 ( 可 能 很 大 ! ) 。 
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对 一 个 默认 具有 display: inline; 
样式 的 元 素 设置 display: block; 的 例子 见 
11.11 节 中 的 示例 (图 11.11.3 )。 在 那个 例子 中 ， 
我 将 其 应 用 到 了 span 元 素 中 ，span 元 素 包 住 
了 网 站 标志 的 标语 。 


display 还 有 其 他 几 个 值 ， 尽 管 IE6 
fe IE7 对 其 中 的 一 些 并 不 支持 。 更 多 信息 参 
JL http://reference.sitepoint.com/css/display ( 一 


定 要 阅读 评论 ) 。 


visibility 属性 不 必 如 图 11.19.7 中 
那样 与 display 属性 结合 使 用 ， 反之 亦 然 。 


visibility 属性 还 有 第 三 个 值 ( 如 果 
不 算 inherit 的 话 ) : collapse， 用 于 table 
元 素 的 部 分 内 容 。IE6 fe IE7 并 不 支持 这 个 
值 。 关 于 collapse 的 更 多 信息 ， 参 见 http:// 
reference.sitepoint.com/css/visibility 5 


img ( 
display: block; 


.hide { 
[* 隐藏 这 个 类 的 所 有 元 素 */ 


visibility: hidden; 








} 


图 11.19.7 在 hide 类 中 移 除 display: none; 声明 ， 
并 将 visibility 属性 的 值 改 为 hidden…… 














Example of visibility: hidden - Mozilla Firef,.. [E] [4 
File Edit View History Bookmarks Tools Help 





B3 Example of visibility: hidden mm m 














图 11.19.8 图像 隐 茂 后 ， 图 像 原先 的 位 置 呈现 空白 





式 机 


样式 表 一 一 


从 移动 设备 到 台 








本 章 内 容 

口 移动 战略 和 注意 事项 

口 理解 和 实现 媒体 查询 

Q 构建 适用 于 媒体 查询 的 页 面 











最 后 一 分 钟 决定 要 不 要 去 看 电影 ; 就 安 
道 尔 的 官方 语言 跟 人 打赌 ， 查找 已 经 迟到 15 
分 钟 的 会 议 所 在 公司 的 电话 号 码 ; 查看 去 这 
家 公司 的 地 图 C 因为 迟到 的 原因 是 找 不 到 这 
家 公司 ) TE 

我 们 想 要 及 时 地 获取 信息 ， 而 随 着 各 种 
形状 和 尺寸 的 移动 设备 的 剧 增 , 万 维 网 可 以 
出 现在 你 的 口袋 里 、 钱 包 里 、 背 包 里 ， 就 像 
它 在 书桌 或 餐桌 上 一 样 方便 。 随 着 苹果 公司 
的 Mobile Safari 浏览 器 的 出 现 以 及 iPhone 的 
流行 ， 如 今 的 移动 浏览 器 同 几 年 前 相 比 已 有 
巨大 的 不 同 。 

现在 ， 网 站 的 建设 者 需要 让 访问 者 能 够 
通过 移动 电话 、 智 能 手机 、 平 板 电脑 、 笔 记 本 、 
台式 机 、 游 戏 机 以 及 未 来 任何 可 以 上 网 的 设 
备 获 取信 息 。 

在 本 章 中 ， 你 将 了 解 到 如 何 构建 在 各 种 
设备 上 都 能 正常 工作 的 网 站 ， 它 能 根据 设备 
功能 的 不 同 对 布局 进行 调整 。 




















12.1 ”移动 战略 和 注意 事项 
创建 适用 于 移动 设备 的 网 站 通常 有 两 种 

















方法 。 
口 建立 专门 用 于 移动 电话 的 站 点 ， 即 专 
门 为 移动 体验 打造 ， 且 与 为 桌面 计算 
机 和 平板 电脑 用 户 准备 的 网 站 独立 的 
网 站 。 有 时 还 为 平板 电脑 (尤其 是 
iPad) 建立 单独 的 网 站 ， 因 此 总 共 至 
少 有 三 个 网 站 。 
口 构建 一 个 适用 于 所 有 情况 的 网 站 。 为 
所 有 的 设备 ( 从 移动 电话 到 桌面 计算 
机 ) 准备 同样 的 HIML， 再 分 别 设置 
适用 于 不 同 设备 的 样式 。 通 过 一 些 额 
外 的 手段 ， 甚 至 可 以 为 移动 电话 用 户 
准备 不 同 的 图 像 和 视频 尺寸 ， 让 他 们 
不 必 因 下 载 太 大 的 文件 而 遇 到 麻烦 。 
( 注意, 我 在 本 章 中 常 使 用 "桌面 计算 机 ” 
一 词 同时 指 代 人 台式 机 和 笔记 本 。 ) 
没有 一 种 正确 的 方法 可 以 适应 所 有 的 情 
形 。 不 过 ， 科 技 与 Web 开发 技术 的 最 新 发 展 
已 将 单一 站 点 方法 推 向 了 Web 社区 讨论 的 前 
沿 。 稍 后 即 会 解释 这 一 点 。 
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1. 专门 用 于 移动 电话 的 网 站 

这 种 方法 基于 这 样 的 思想 : 用 于 桌面 计 
算 机 的 网 页 和 用 于 移动 电话 的 网 页 之 间 的 差 
异 并 不 仅仅 体现 在 显示 尺寸 上 ， 更 重要 的 是 
环境 不 一 样 。 这 种 方法 认为 ， 访 问 者 在 旅途 
中 需要 用 移动 电话 获取 的 信息 与 他 们 在 家 里 
或 办 公 室 里 要 查找 的 信息 很 不 一 样 ， 因 此 单 
纯 地 将 来 自 桌 面 计算 机 网 站 的 信息 小 型 化 是 
不 够 的 。 同 时 ， 与 移动 电话 相 比 ， 桌 面 计算 
机 变 得 越 来 越 强 大 ， 互 联网 连接 速率 越 来 越 
快 ， 因 此 它们 有 机 会 提供 更 丰富 的 体验 。 

这 种 方法 要 求 决定 哪些 信息 是 对 移动 用 
户 特 别 有 用 的 ， 并 为 他 们 提供 专门 针对 移动 
设备 的 网 站 ， 使 用 户 可 以 通过 最 少 的 滚动 、 
触 碰 、 点 击 、 下 载 和 等 待 时 间 使 用 网 站 。 

尽管 这 种 方法 并 非 只 针对 大 型 公司 和 公 
共 服 务 网 站 , 但 实际 示例 大 都 来 自 这 些 网 站 。 
对 此 ， 很 大 一 部 分 原因 是 这 些 网 站 更 容易 承 
担 开 发 和 维护 多 站 点 的 任务 。Amazon Target 
等 购物 网 站 通常 极 大 地 简化 其 移动 站 点 的 首 
页 ， 并 修改 导航 的 策略 。 例 如 ，Target ( www. 
target.com ) 考虑 到 移动 电话 访问 者 很 有 可 能 
是 在 户外 访问 网 站 ， 并 查找 附近 的 实体 店 ， 
因此 它 在 其 移动 站 点 上 突出 了 商铺 位 置 的 信 
息 。 同 时 ， 该 网 站 为 小 屏幕 用 户 削 减 了 商品 
分 类 数量 ， 为 他 们 提供 了 完全 不 同 的 导航 商 
品 分 类 的 方式 。 

旧金山 湾 区 捷 运 系统 (Bay Area Rapid 
Transit，BART ) 是 一 家 提供 公共 运输 服务 的 机 
构 ， 受 众 广泛 。 它 们 为 访问 者 提供 三 种 版 本 的 
网 站 : 桌面 站 ( www.bart.gov , 如 图 12.1.1 所 示 )、 
移动 站 (m.bartgov， 如 图 12.1.2 所 示 ) 和 为 旧 
设备 提供 的 更 为 精简 的 移动 版 (www.bart.gov/ 
wireless/ ) 。 同 时 ， 他 们 允许 用 户 通过 页 脚 的 
链接 ( 参见 图 12.1.2 ) 在 不 同 版 本 之 间 进 行 切换 ， 
将 控制 权 交 到 访问 者 手 里 。 



































eon BART - Ray Area Rapid Transit 








12.4.4. 这 是 在 桌面 计算 机 上 访问 BART 网 站 
的 样子 。 对 于 其 他 一 些 设备 ， 如 iPad， 默 认 也 会 显 
示 这 个 版 本 。 页 脚 提供 了 切换 到 移动 版 的 链接 ( 可 
参见 图 12.1.2 ) ， 此 处 没有 显示 出 来 。 














QuickPlanner 

Advisories 

Real Time Departures 
System Map / Station Info 
Find A Station 

Recent News 


Bike Rules 


For updates via SMS, text 'BART help' 
to 878787 to get started. Read more. 





Desktop | Older Mobile Site | Contact | © 201 1 


4 » "€ tm 








图 12.1.2. BART 的 移动 版 网 站 精简 了 界面 ， 省 
略 了 桌面 站 (参见 图 12.1.1 ) 上 的 图 片 ， 让 访问 
者 可 以 更 快 地 找到 信息 。 如 果 查 看 页 脚 ， 会 发 现 
Desktop ( 桌面 版 ) 和 Older Mobile Site ( 旧 移 动 版 ) 
两 个 链接 ， 前 者 指向 如 图 12.1.1 所 示 的 网 站 ， 后 
者 指向 一 个 更 为 精简 的 移动 版 网 站 ( www.bart.gov/ 


wireless/ ) 
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耐克 公司 的 网 站 也 提供 了 至 少 三 种 版 
本 一 一 用 于 智能 手机 的 版 本 、 用 于 iPad 的 版 
本 以 及 用 于 桌面 计算 机 的 版 本 。 它 们 包含 的 
图 像 依次 变 得 丰富 。 类 似 地 ， 雅 虎 网 站 也 有 
移动 设备 、 平 板 电脑 和 桌面 计算 机 的 体验 。 


2. 一 个 网 站 适应 所 有 情形 

看 起 来 ， 每 周 都 有 新 的 设备 投放 到 市 场 
上 ， 毫 无 疑问 ， 各 家 公司 都 在 设计 新 的 设备 
类 型 。 构 建 和 维护 多 个 网 站 现实 吗 ? 甚至 说 ， 
有 必要 吗 ? 我 们 无 法 预知 未 来 的 情形 ， 因 此 
这 种 方法 主张 构建 适用 于 所 有 设备 的 网 站 ， 
然后 根据 不 同 的 设备 调整 布局 。 

对 大 多 数 人 来 说 ， 单 一 网 站 就 能 满足 访 
问 者 的 需求 。 此 外 ， 如 今 预 测 访问 者 访问 网 
站 的 目的 已 变 得 更 为 困难 ， 特 别 是 在 智能 手 
机 及 其 浏览 絮 变 得 更 为 强大 的 情况 下 ， 这 也 
是 采用 单一 网 站 的 原因 之 一 。 例 如 ， 移 动用 
户 并 不 一 定 处 于 移动 的 状态 。 下 面 这 种 情形 
一 定 发 生 在 很 多 人 号 上 : 闲 坐 在 沙发 上 用 手 
机 上 网 , 尽管 笔记 本 电脑 就 在 房间 的 另 一 侧 。 
大 多 数 情况 下 ， 我 想 看 到 完整 的 站 点 ， 而 不 
是 桌面 体验 的 移动 化 版 本 。 

不 过 ， 我 们 无 法 绕 开 的 事实 是 移动 电话 
的 屏幕 尺寸 和 带宽 更 小 ， 因 此 我 们 仍 需 花 工 
夫 创 建 适应 这 种 环境 的 网 站 。 


3. 一 个 网 站 适应 所 有 情形 : 着 手 实 现 

一 个 网 站 的 方案 听 起 来 的 确 不 错 ， 不 过 
怎样 才能 适应 如 此 繁多 的 设备 呢 ? 

这 是 渐进 增强 值得 称道 的 地 方 〈 请 回顾 
前 言 中 的 “渐进 增强 : 一 种 最 佳 实践 ”一 节 ) 。 
由 于 HTML 与 CSS 是 分 离 的 ， 因 此 可 以 按照 
分 辨 率 逐 渐 增 高 、 设 备 功 能 逐渐 增强 的 次 序 ， 
提供 逐渐 增强 的 布局 ( 如 图 12.1.3、 图 12.1.4 
和 图 12.1.5 所 示 ) o 

























































































图 12.1.3 不 管 你 信和 不信 ， 这 里 以 及 图 12.1.4 和 图 
12.1.5 显示 的 Food Sense 主页 都 来 自 同一 个 网 站 

(www.foodsense.is ) ， 而 不 是 各 自 具 有 单独 URL 
的 不 同 网 站 。 这 个 网 站 采用 了 响应 式 Web 设计 方 
法 ， 因 此 它 的 布局 可 以 根据 不 同 的 查看 环境 进行 改 
7E, iPhone ( 如 本 图 所 示 ) 及 其 他 屏幕 大 小 相似 的 
设备 会 根据 特定 的 CSS 规则 显示 布局 。 对 于 更 大 
的 浏览 器 窗口 (参见 图 12.1.4 和 图 12.1.5) , ， 则 有 
另外 一 些 CSS 规则 控制 相应 的 布局 






































iOS Simulator - iPad / iOS 5.0 (9A334) 








12.1.4 ”这 是 使 用 iPad 及 其 他 屏幕 大 小 相似 的 
设备 查看 Food Sense 主页 的 样子 。 由 于 浏览 器 有 
更 多 空间 显示 内 容 ， 因 此 这 套 样式 的 CSS 对 标识 
和 导航 都 进行 了 调整 
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12.1.5 XÆ Food Sense 主页 显示 在 桌面 浏览 






























































器 上 的 样子 ， 也 是 最 宽 的 显示 效果 。 该 站 还 有 另外 
两 个 布局 没有 展示 出 来 。 你 可 以 在 计算 机 上 访问 
www.foodsense.is， 再 拖 动 浏览 器 的 一 角 让 浏览 
窗口 变 窄 或 变 宽 并 查看 效果 
Ethan Marcotte 为 我 们 提供 了 如 何 实现 上 
述 效 果 的 蓝图 ， 并 将 相应 的 方法 命名 为 响应 
X, Web 设计 (responsive Web design ) 。 他 的 
X 章 (www.alistapart.com/articles/responsive- 
web-design/) ”和 Responsive Web Design (A 
Book Apart, 2011 ) 一 书 均 获 得 了 极 高 的 评价 。 
他 的 方法 植 根 于 以 下 三 点 。 
口 灵活 的 、 基 于 网 格 的 布局 。 这 就 是 你 
在 第 11 章 看 到 的 流 式 布局 (有 些微 
调整 ) 。 对 于 响应 式 站 点 ， 所 有 的 
width, margin 和 padding 属性 都 用 百 
分 数 设 定 ， 因 此 所 有 的 布局 成 分 都 是 
相对 的 。 
口 灵活 的 图 像 和 媒体 。 图 像 和 媒体 资源 
的 尺寸 也 是 用 百分数 定义 的 ， 从 而 可 以 
根据 环境 进行 缩放 。 ( 参见 Ethan 的 书 
摘 : www.alistapart.com/articles/fluid- 
images/。 ) 随 着 技术 的 发 展 ， 现 在 
已 经 可 以 根据 不 同 的 设备 屏幕 尺寸 呈 
现 不 同 尺 才 的 图 像 ， 从 而 让 使 用 移动 
电话 的 用 户 不 必 等 待 大 尺寸 图 像 的 
下 载 。 







































































口 媒体 查询 。 媒 体 查 询 是 CSS3 的 组 件 
之 一 ， 使 用 这 项 技术 ， 可 以 根据 媒 
体 特征 ( 如 浏览 器 可 视 页 面 区 域 的 
宽度 ) 对 设计 进行 调整 (参见 下 一 节 
的 “理解 视觉 区 域 及 使 用 视觉 区 域 
meta 元 素 ”) 。 你 将 在 12.2 节 了 人 解 
更 多 的 信息 ， 并 在 12.3 节 看 到 有 关 的 
实例 。 

Web 社区 围绕 响应 式 站 点 的 讨论 已 经 
越 来 越 多 了 ， 并 分 享 了 大 量 基于 Ethan 方法 
的 技术 。 这 种 方法 并 不 仅仅 是 博客 上 的 讨 
Wo (W E t I Ekt Y (www.bostonglobe. 
com) 的 新 网 站 是 基于 响应 式 Web 设计 
技术 制作 的 ， 该 站 一 经 推出 就 成 了 热 议 的 
话题 。 

我 们 将 在 本 章 余下 的 部 分 重点 介绍 这 种 
方法 。 从 第 11 章 起 ， 你 将 了 解 到 如 何 对 网 站 
运用 移动 优先 的 方法 ， 使 用 媒体 查询 逐渐 为 
更 大 的 屏幕 分 辩 率 添加 CSS (参见 图 12.1.3、 
图 12.1.4 和 图 12.1.5) o 

不 过 ,这 并 不 是 一 刀 切 的 解决 方案 。 如 
前 所 述 ， 访 问 环境 以 及 所 需 的 内 容 、 导 航 、 
外 观 、 交 互 的 不 同 有 可 能 要 求 建立 分 离 的 
站 点 。 


























Luke Wroblewski 于 2009 年 11 月 开始 
倡导 “移动 优先 ”的 设计 (www.lukew.com/ff/ 
entry.asp?933 ) 。 其 前 提 是 在 考虑 移动 体验 的 
情况 下 设计 网 站 ， 再 针对 桌面 环境 实现 对 应 
的 组 件 (如 果 这 些 站 点 不 一 样 的 话 ) 。 根 据 
他 的 观点 ， 这 样 做 更 容易 判断 哪些 内 容 对 所 
有 设备 的 用 户 都 是 最 重要 的 。 他 针对 该 主题 
的 演讲 JU www.lukew.com/ff/entry.asp?1137。 
他 还 写 了 一 本 书 ， 书 名 正 是 Mobile First (A 
Book Apart，2011 ) 。 
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Jeremy Keith 在 题 为 “One Web” 的 
演讲 中 归纳 了 “一 个 网 站 适应 所 有 情形 “的 
方法 (www.vimeo.com/27484362/ ) o ( 如 果 
你 更 倾向 于 阅读 ， 可 以 参见 相应 的 讲稿 全 文 : 


www.adactio.com/articles/4938/, ) 


AD 上 述 两 个 材料 都 值得 高 度 推荐 。 其 实 ， 
现在 就 可 以 观看 了 ， 我 等 着 你 ! 


12.2 ”理解 和 实现 媒体 查询 


我 们 在 8.6 节 中 学 习 过 ， 可 以 使 用 两 种 方 
式 针 对 特定 的 媒体 类 型 定位 CSS。 (还 有 第 
三 种 方式 ， 即 使 用 @import 规则 ， 我 们 不 讨论 
这 种 方法 ， 因 为 它 会 影响 性 能 。 ) 回顾 一 下 ， 
第 一 种 方式 是 使 用 link 元 素 的 media 属性 ， 
例 An <link rel="stylesheet" href-"global. 
css" media="screen" /> ( fj F head iÑ ) 。 
第 二 种 方式 是 在 样式 表 中 使 用 emedia 规则 ， 
例如 : 











/* 打印 样式 表 */ 

@media print { 
header[role-"banner"] nav, 
.ad ( 


display: none; 


) 

媒体 查询 增强 了 媒体 类 型 方法 ， 人 允许 根据 
特定 的 设备 特性 定位 样式 ( 参见 图 12.2.1 ) 。 
要 调整 网 站 的 呈现 样式 ， 让 其 适应 不 同 的 屏幕 
尺寸 ,采用 媒体 查询 特别 方便 。 下 面 列 出 了 可 
以 包含 在 媒体 查询 里 的 媒体 特性 。 

O width ( 宽度 ) 














(D WebKit 是 Chrome, Safari 等 浏览 器 使 用 的 网 页 引擎 和 JavaScript 引擎 开源 程序 。 一 一 译 者 注 


Q height ( 高 度 ) 

D device-width (设备 宽度 ) 
O device-height (设备 高 度 ) 
口 orientation (方向 ) 


CQ aspect-ratio ( 高 宽 比 ) 





口 device-aspect-ratio (设备 高 宽 比 ) 
O color (颜色 ) 

口 color-index ( 颜色 数 ) 

口 monochrome ( 单 色 ) 

O resolution ( 分辨 率 ) 

口 scan (扫描 ) 

a grid (HHE ) 








«IDOCTYPE html» 

«html lang-"en"» 

«head» 
«meta charset-"utf-8" /» 
«title»Media queries in link elements 
' </title> 
«meta name-"viewport" content-"width- 
» device-width, initial-scale-1.0" /> 
«link rel="stylesheet" media-"all" 
» href-"base.css" /> 


<l-- 

37 HEX only 

X8 E screen 

特性 : min-width 的 值 为 480px 

--> 

<link rel="stylesheet" media-"only 

> screen and (min-width: 480px)" 
» href="styles-480.css" /> 

















</head> 
<body> 
12.2.1 base.css 中 的 样式 用 于 所 有 的 输出 设备 。 




















styles-480.css 中 的 样式 则 仅 用 于 支持 媒体 查询 且 视 
觉 区 域 宽度 不 低 于 480 像素 的 浏览 器 
还 有 一 些 非 标 准 的 媒体 特性 ， 如 
Q -webkit-device-pixel-ratio ( WebKit " 
设备 像素 比 ) 
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Q -moz-device-pixel-ratio ( Mozilla n 


设备 像素 比 ) 

除了 orientation scan 和 grid 以 外 ， 
上 述 属性 均 可 添加 min- 和 max- pij 2. min- 
前 绥 定 位 的 是 “大 于 或 等 于 ”对 应 值 的 目 
标 ， 而 max- 前 绥 定 位 的 则 是 “小 于 或 等 于 ” 
对 应 值 的 目标 。 在 本 章 里 ， 我 们 将 着 重 介 
绍 min-width 和 max-width, 为 它们 是 制 
作 响 应 式 页 面 时 反复 用 到 的 两 个 媒体 特性 。 
CSS3 媒体 查询 规范 Cwww.w3.org/TR/ess3- 
mediaqueries/#medial ) 中 有 对 各 项 媒体 特性 
的 介绍 。 

现代 桌面 浏览 器 和 移动 电话 浏览 器 对 
媒体 查询 的 支持 程度 很 高 。 不 过 ，Internet 
Explorer 8 及 以 下 版 本 并 不 支持 媒体 查询 ( 针 
对 这 些 浏览 器 的 min-width 和 max-width 解决 
方案 见 第 一 条 提示 ) 。 


1. 媒体 查询 语法 和 示例 

Peter Gasston 的 The Book of CSS3 (No 
Starch Press, 2011) 一 书写 得 很 棒 。 该 书 对 媒 
体 查询 的 语法 做 了 很 好 的 归纳 。 以 下 是 媒体 
查询 的 基本 语法 。 

口 指向 外 部 样式 表 的 链接 : 


«link rel="stylesheet" media= 





























"logic type and (feature: 
value)" href="your-stylesheet. 
css" /> 


口 位 于 样式 表 中 的 媒体 查询 : 
@media logic type and (feature: 
' value) { 
/* 目标 CSS 样 式 规则 写 在 这 里 */ 











(D Mozilla 是 Firefox 等 浏览 器 的 基础 程序 。 一 一 译 者 注 





/* 常规 样式 写 在 这 里 。 每 个 设备 都 能 获取 它 
; 们 ， 除 非 被 媒体 查询 中 的 样式 规则 覆盖 */ 
body { 
font-size: 100%; 
} 


pt 


color: green;} 


/* 
逻辑 是 only 
类 型 是 screen 
特性 : min-width 的 值 为 480px 
*/@media only screen and (min-width: 
> 480px) ( 
[* 针对 这 种 情形 的 样式 写 在 这 里 */ 
pt 
color: red; 
font-weight: bold; 
) 
} 


E 12.2.2 这 个 粗略 的 示例 包含 了 默认 的 段落 样 
式 ， 接 着 是 当 媒 体 查 询 结果 为 真 时 对 段落 文本 的 修 
改 。 我 将 这 份 样式 表 保 存 为 basic-media-query.css， 
并 在 如 图 12.2.3 所 示 的 页 面 中 加 载 该 文件 。 结 果 如 
图 12.2.4、 图 12.2.5 和 图 12.2.6 所 示 









































<!DOCTYPE html» 
«html lang-"en"» 
«head» 
«meta charset-"utf-8" /» 
«title»Basic media query example«/title» 
«meta name-"viewport" content-"width- 
» device-width, initial-scale-1.0" /> 
«link rel-"stylesheet" 
href-"assets/ 
> css/basic-media-query.css" /> 
«/head» 
«body» 
<p>Hi, I'm a paragraph. By default, I'm 
> green and normal. But get me in a 
» viewport that's at least 480px wide, 
>and I get red and bold!«/p» 
«/body» 
</html> 











12.2.3 这 个 页 面包 含 指向 外 部 样式 表 ( 参见 
图 12.2.2 ) 的 链接 ， 该 样式 表 包 含 一 个 基本 的 媒体 
查询 示例 
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n 
normal. But get me in a viewport that's at least 
Opx wide, and I get red and bold! 








12.2.4 





iPad 中 时 Sey 








在 iPhone 纵向 模式 F, Mobile Safari 
的 视觉 区 域 为 320 像素 宽 ， 
基准 样式 定义 的 绿色 ( 它 从 浏览 器 的 默认 样式 继承 
了 font-weight 的 常规 值 ) 。 不 过 ， 





因此 文本 仍 为 样式 表 中 





当 页 面 显示 在 





iOS Simulator - iPad / iOS 5.0 (9A334) 





12.2.5 





由 于 在 iPad 纵向 模式 下 浏览 器 的 








视觉 区 域 为 768 像素 宽 ， 而 宽度 大 于 或 等 于 480 像 
素 时 会 触发 媒体 查询 ， 因此 文本 变 成 以 红色 、 粗 体 























显示 。 在 iPhone 横向 模式 下 该 效果 也 会 生效 ， 





为 该 模式 下 视觉 区 域 的 宽度 刚好 为 480 像素 


eoo 
有 (i Basic media query example 


Basic media query example 
| + 


Hi, I'm a paragraph. By default, I'm green and normal. 
But get me in a viewport that's at least 480px wide, 
and I get red and bold! 











122.6 ”现代 桌面 浏览 器 也 理解 媒体 查询 。 这 是 
Firefox， 通 过 拖 搜 窗口 的 右 下 角 使 视觉 区 域 的 宽度 小 
于 480 像素 ， 因 此 文本 显示 为 红色 ，font-weight 为 
常规 值 。 如 果 让 窗口 变 大 , 使 其 宽度 至 少 为 480 像素 ， 
文字 将 立即 以 粗 体 、 红 色 显 示 一 一 无 须 刷新 页 面 
我 将 在 随后 解释 有 关 的 语法 ， 不 过 几 个 
简单 的 例子 (参见 图 12.2.1 和 图 12.2.2) 有 助 
于 在 上 下 文中 理解 这 些 语 句 。 示 例 中 的 查询 是 
相同 的 ， 但 它们 呈现 样式 的 方式 却 是 不 同 的 。 
图 12.2.1 中 的 示例 可 以 翻译 为 “ 仅 当 媒体 类 型 
为 screen 且 视 觉 区 域 最 小 宽度 为 480 像素 时 ， 
加 载 并 使 用 styles-480.css 中 的 样式 规则 ”。 
图 12.2.2 中 的 示例 可 以 翻译 为 “ 仅 当 媒体 类 型 
为 screen 上 且 视 觉 区 域 最 小 宽度 为 480 像素 时 ， 
使 用 下 面 的 样式 规则 ”。 (关于 视觉 区 域 的 含 
义 ， 参见 本 节 末 尾 的 “理解 视觉 区 域 及 使 用 
视觉 区 域 meta 元 素 ”。 ) 我 创建 了 一 个 测试 
页 (如 图 122.3 所 示 ) ， 并 指向 包含 图 12.2.2 
中 代码 的 样式 表 。 可 以 查看 该 页 面 在 iPhone 
图 12.2.4) 、iPad (图 12.2.5 ) 及 罕 的 桌面 浏 
Vds (K 122.6) 中 显示 的 样子 。 
回 到 语法 ， 让 我 们 看 看 这 些 代码 的 组 成 
部 分 。 
O logic (3238 ) 部 分 是 可 选 的 ， 其 值 可 
以 是 only 或 not。only 关键 字 可 以 确 
保 旧 的 浏览 器 不 读 取 余 下 的 媒体 查询 ， 
同时 一 并 忽略 链接 的 样式 表 。not X 
键 字 可 以 对 媒体 查询 的 结果 求 反 ， 让 
其 反面 为 真 。 例 如 ,使 用 media="not 
screen" 会 在 媒体 类 型 为 screen 以 外 
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的 任何 类 型 时 加 载 样式 表 。 
O type ( 类 型 ) 部 分 是 媒体 类 型 ， 如 
screen, print 等 。 
O feature: value 对 是 可 选 的 ， 但 一 旦 
包含 它们 ， 它们 必须 用 括号 包围 旦 前 
面 要 有 and 这 个 字 。feature 是 预定 
义 的 媒体 特性 ， 如 min-width、max- 
width、orientation 等 。 对 color、 
color-index fil monochrome 特性 来 说 ， 
value 是 可 选 的 。 
可 以 使 用 and 将 多 个 特性 和 值 的 组 合 串 
接 起 来 ， 还 可 以 创建 一 系列 媒体 查询 ( 使 用 
逗号 分 隔 每 个 媒体 查询 ) 。 在 用 逗号 分 隔 的 
媒体 查询 列表 中 ， 如 果 有 一 个 媒体 查询 为 
真 ， 则 整个 媒体 查询 列表 为 真 。 图 12.2.7 和 
12.2.8 显示 了 多 种 媒体 查询 。 
























































«link rel="stylesheet" media-"only 
'screen and (min-width: 480px) 
>and (max-width: 767px)" href= 


» "styles.css" /> 


«link rel="stylesheet" media="only 
'screen and (orientation: 
> landscape)" href-'styles.css" /> 


«link rel="stylesheet" media-"only 
'print and (color)" href-"color- 
' pages.css" /» 


<link rel="stylesheet" media-"only 
> print and (monochrome)" 
* href-"monochrome-pages.css" /» 


«link rel="stylesheet" media-"only 

'screen and (color), projection 

and 

» (color)" href-'styles.css" /> 
«/head» 


/* 针对 所 有 设备 的 基准 样式 S 


/* 开始 媒体 查询 
= */ 
Gmedia only screen and (min-width: 
480px) 
>and (max-width: 767px) ( 

/* 样式 规则 */ 
} 


@media only screen and (orientation: 
» landscape) { 

/* 样式 规则 */ 
】 


Gmedia only print and (color) { 
[* 样式 规则 */ 
} 


@media only print and (monochrome) { 
/* 样式 规则 */ 
} 


@media only screen and (color), 
projection and (color) { 

/* 样式 规则 */ 
} 

















<body> 


12.2.7 ” 当 媒 体 查询 为 真 时 加 载 外 部 样式 表 的 示例 





12.2.8 ”这 些 媒体 查询 与 图 12.2.7 中 的 是 相同 
的 ， 只 是 直接 出 现在 样式 表 中 


2. 指向 外 部 样式 表 时 定义 媒体 查询 

(1) 在 希望 使 用 有 关 样 式 表 的 每 个 HTML 
页 面 的 head 部分， 输入 «link rel="styl- 
esheet", 

(2) 输入 media=" 以 开始 媒体 查询 。 

(3) 根据 “定义 媒体 查询 的 步 又”， 创 建 
媒体 查询 。 

(4) 输入 " 以 结束 媒体 查询 。 

(5) 输入 一 个 空格 ， 再 输入 href-"url. 
css"， 这 里 的 url.css 是 当 媒 体 查 询 为 真 时 应 
该 应 用 到 页 面 的 样式 表 的 路 径 和 名 称 。 

(6) 输入 一 个 空格 ,最 后 输入 />。 























( 如 果 
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你 愿意 ， 也 可 以 不 输入 空格 ， 直 接 输入 >。 这 
两 种 方式 都 是 HTMLS5 所 允许 的 ， 其 效果 也 是 
相同 的 。 ) 


3. 在 样式 表 内 定义 媒体 查询 并 关联 样式 
规则 

(1) 在 样式 表 内 , 输入 emedia 和 一 个 空格 。 

(2) 根据 “定义 媒体 查询 的 步骤”， 创 建 
媒体 查询 。 

(3) 输入 一 个 空格 和 {。 

(4) 在 新 的 一 行 ( 可 选 ) 创建 当 媒体 查询 
为 真 时 应 该 应 用 到 页 面 的 样式 规则 。 

(5) 在 新 的 一 行 (可 选 ) 输入 } 以 结束 媒 
体 查 询 块 。 


4. 定义 媒体 查询 的 步骤 

(1) 可 选 ， 输 入 only 和 一 个 空格 。 ( 尽管 
这 一 步 是 可 选 的 ， 但 我 推荐 包含 only， 除 非 
指定 了 not, ) 如 果 不 指定 only， 输 入 not 和 
一 个 空格 (可 选 ) ， 表 示 条 件 为 媒体 查询 的 
反面 为 真 。 

(2) 输入 type, 这 里 的 type 是 媒体 类 型 ( 通 
党 为 screen IÈ print, 参见 8.67) 。 

(3) 可 选 ， 输入 一 个 空格 、and fl 2j 
一 个 空格 。 再 输入 (feature: value), H 
中 feature 是 某 种 预定 义 的 媒体 特性 ( 包 
括 width, height, device-width, device- 


height, orientation, aspect-ratio, 











device-aspect-ratio, color, color-index, 
monochrome, resolution, scan 以 及 grid) , 
value 是 合适 的 feature 值 (通常 情况 下 以 像 
素 或 em 表示 ， 但 也 并 非 总 是 如 此 ， 有 关 示 例 
参见 图 12.2.2、 图 12.2.7 和 图 12.2.8 ) 。 

(4) 如 果 想 创建 一 系列 媒体 查询 ， 输 入 一 
个 逗号 ， 再 重复 第 (2) 步 和 第 (3) 步 。 否 则 ， 
媒体 查询 就 定义 完成 了 。 








EED 有 要 了 解 如 何 解 决 IE8 及 以 下 版 本 不 
支持 媒体 查询 的 问题 ， 参 见 12.3 节 中 的 “在 
IE8 及 以 下 版 本 中 呈现 媒体 查询 样式 。 


全 ”任何 位 于 媒体 查询 以 外 的 基准 样式 规 
则 都 会 应 用 于 所 有 的 设备 。 可 以 使 用 媒体 查 
询 履 盖 这 些 样式 规则 。 需 要 说 明 的 是 ， 媒 体 
查询 样式 规则 声明 仅 在 与 常规 样式 冲突 时 进 
行 履 盖 ， 如 图 12.2.5 中 的 color: green;, de 
果 媒 体 查询 之 前 的 p 的 样式 规则 包含 font- 
style: italic;， 那 么 媒体 查询 为 真 时 段落 文 
本 仍 以 斜体 显示 ， 因 为 媒体 查询 内 的 p 的 样 
式 规则 并 未 设置 font-style。 


iPhone 调 高 了 横向 模式 下 页 面 的 缩放 
级 别 。 因 此 ， 有 些 内 容 会 显示 到 可 视 区 域 以 
外 ， 需 要 访问 者 手动 缩小 页 面 ， 让 宽度 在 屏 
幕 边 界 以 内 。 有 一 种 方法 可 以 防止 这 种 现象 
的 产生 ， 但 不 幸 的 是 ， 使 用 这 种 方法 也 会 让 
访问 者 无 法 改变 页 面 缩放 级 别 。 不 过 ， 如 果 
你 一 定 要 控制 这 种 行为 ， 可 以 添加 以 下 代码 
中 突出 显示 的 部 分 : 


content="width=device-width, initial- 


<meta name="viewport" 


scale=1.0, maximum-scale=1.0, user- 
scalable=no"/>。 但 我 不 推荐 使 用 这 种 方 
法 ， 应 该 忽略 这 两 个 属性 ， 让 访问 者 控制 网 
站 页 面 的 缩放 。 


CERDO 可 以 使 用 苹果 推出 的 免费 的 iOS 

Simulator (iOS 模拟 器 ) 测试 示例 页 面 在 

iPhone 和 iPad 中 的 显示 情况 。 参 见 下 一 节 的 
“移动 编码 和 测试 工具 ”。 
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理解 视觉 区 域 及 使 用 视觉 区 域 meta 元 素 

视觉 区 域 (viewport ) 指 的 是 浏览 器 (包括 桌面 浏览 器 和 移动 浏览 器 ) 显示 页 面 的 区 域 。 
它 不 包含 浏览 器 地 址 栏 、 按 钮 这 样 的 东西 ， 只 是 浏览 区 域 。 媒 体 查询 的 width 特性 对 应 的 是 
视觉 区 域 的 宽度 。 不 过 ，device-width 特性 不 是 ， 它 指 的 是 屏幕 的 宽度 。 

在 移动 设备 (如 iPhone ) E, 默认 情况 下 这 两 个 值 通常 不 一 样 。Mobile Safari (iPhone 的 
浏览 器 ) 的 视觉 区 域 默 认为 980 像素 宽 , 但 iPhone 的 屏幕 只 有 320 像素 宽 (高 为 480 像素 ) 。 
因此 ，iPhone 会 像 设 为 980 像素 宽 的 桌面 浏览 器 那样 显示 页 面 ， 并 将 页 面 缩小 以 适应 320 像 
素 的 屏幕 宽度 (在 纵向 模式 下 ) ， 如 图 12.2.9 所 示 。 结 果 ， 当 你 在 Mobile Safari 中 浏览 大 部 
分 为 桌面 浏览 器 建立 的 网 站 时 ， 会 显示 将 这 些 网 站 缩小 了 的 样子 。 在 横向 模式 下 也 是 这 样 处 
理 的 , 只 不 过 宽度 为 480 像素 。 如 图 12.2.9 所 示 , 如 果 不 进 行 放大 , 页 面 通常 是 难以 阅读 的 ( 注 
意 不 同 设备 的 默认 视觉 区 域 宽度 并 不 相同 ) 。 




















12.2.9 ”我 的 测试 页 面包 含 一 个 320 像素 x 12.2.40 ”这 个 测试 页 面 的 代码 与 图 12.2.9 
480 像素 大 小 、 绿 色 的 div, Mobile Safari 的 视 中 页 面 的 代码 相 比 ， 除 了 包含 设置 了 width=de- 
觉 区 域 默 认为 980 像素 宽 ， 因 此 iPhone 会 将 该 vice-width 的 视觉 区 域 meta 元 素 以 外 ， 其 他 内 
div 缩小 ， 以 在 320 像素 宽 的 屏幕 内 显示 它 。 容 是 完全 相同 的 。 如 你 所 见 ， 现 在 的 视觉 区 域 

















这 就 是 这 个 绿色 盒子 大 约 占 据 屏 幕 宽度 的 三 分 宽度 与 屏幕 宽度 是 相同 的 
之 一 ( 即 320/980 ) 的 缘故 


幸好 ， 对 于 流 式 布局 (PE CSS 中 使 用 百分数 宽度 建立 的 布局 ) 有 一 种 简单 的 解决 方案 。 
在 页 面 的 head 部 分 添加 视觉 区 域 meta 元 素 即 可 。 


«IDOCTYPE html» 
«html lang-"en"» 
«head» 
«meta charset-"utf-8" /» 
«title»Fancy page title«/title» 
«meta name-"viewport" content-"width-device-width, initial-scale-1.0" /» 





232 $123 


样式 表 一 一 从 移动 设备 到 台式 机 





«/head» 
«body» 


这 段 代码 的 重点 是 width=device-width。 有 了 这 条 语句 ， 视 觉 区 域 的 宽度 会 被 设 成 与 设 
备 宽度 (xp iPhone 来 说 为 320 像素 ) 相同 的 值 ， 因 此 在 纵向 模式 下 该 宽度 的 页 面 内 容 会 填充 
整个 屏幕 (如 图 12.2.10 所 示 ) 。 如 果 不 包 含 这 一 语句 ， 使 用 媒体 查询 的 min-width 和 max- 


width 特性 将 不 会 得 到 预期 的 结果 。 


代码 中 的 initial-scale-1.0 部 分 对 width 和 device-width 值 没 有 影响 ， 但 通常 会 包含 
这 一 语句 。 它 将 页 面 的 默认 缩放 级 别 设 成 了 100%。 你 也 可 以 指定 小 于 1.0 或 大 于 1.0 的 值 。 

还 有 其 他 三 种 属性 ( 不 过 这 里 并 未 演示 ), 将 minimum-scale 设 成 大 于 0 上 且 不 超过 10.0 的 值 ， 
可 以 有 效 地 控制 页 面 的 最 小 缩放 级 别 。 关 于 maximum-scale 和 user-scalable 属性 的 信息 ， 参 


见 提示 。 
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上 一 节 解 释 了 媒体 查询 是 如 何 发 挥 作用 
的 。 现 在 你 将 看 到 如 何 将 媒体 查询 应 用 到 完 
整 的 页 面 ， 从 而 让 页 面 的 布局 适应 设备 视觉 
区 域 的 大 小 。 这 就 是 Ethan Marcotte 的 啊 应 式 
Web 设计 使 用 的 技术 。 不 过 ， 我 不 会 像 啊 应 
式 设计 那样 让 图 像 大 小 适应 视觉 区 域 (这 不 
是 强制 的 ) 。 我 将 使 用 第 11 章 中 作为 示例 的 
页 面 开 始 以 下 的 讲解 。 

我 不 会 展示 应 用 于 每 个 媒体 查询 块 内 的 
全 部 样式 规则 ， 因 为 各 个 网 站 的 这 些 样式 规 
则 都 不 一 样 。 重 要 的 是 了 解 如 何 建立 响应 式 
网 站 ， 以 及 用 于 实现 响应 式 网 站 的 媒体 查询 
类 型 。 完 整 的 页 面 和 代码 见 www.bruceonthe- 
loose.com/htmless/examples/。 



































1. 创建 内 容 和 HTML 
一 切 应 该 从 可 靠 的 、 认 真 考 虑 过 的 内 容 








(D 在 西方 排版 、 设 计 领 域 常 ) 


























文本 是 经 过 改造 的 、 没 有 意义 的 拉丁 文 ， 常 用 “lorem ipsum” 指 代 这 段 文本 。 





开始 。 如 果 你 试 着 用 占 位 符 文 本 ( 如 没有 任 
何 含义 的 lorem ipsum ^ ) 设 计 和 构建 你 的 网 站 ， 
当 你 填 人 真正 的 内 容 以 后 ， 你 可 能 会 发 现形 
式 与 内 容 并 没有 结合 得 很 好 。 因 此 ， 应 该 尽 
可 能 地 将 内 容 采 集 工 作 提前 ， 从 而 对 设计 和 
开发 满足 访问 者 ( 和 你 ) 需 求 的 网 站 更 有 信心 。 
示例 页 面 的 底层 HTML 与 第 11 章 的 页 面 
的 代码 是 相同 的 ， 除 了 以 下 三 处 例外 。 

O RE head 元素 中 添加 了 «meta name= 
"viewport" content="width=device- 
width，initial-scale=1.0"/>。 关 于 
这 行 代码 的 作用 ， 参 见 “ 理 解 视觉 区 
域 及 使 用 视觉 区 域 meta 元 素 ”。 如 果 
你 在 实现 一 种 灵活 的 布局 ， 建 议 你 在 
页 面 中 包含 此 meta 元 素 。 

O 我 移 除 了 页 面 底部 的 小 的 缩 略 图 ( 有 
20 多 个 这 样 的 图 像 ) 。 要 注意 带宽 (以 
及 设备 能 力 ) ， 这 些 图 片 的 数量 超过 



































EDI “lorem ipsum” 开 头 的 拉丁 文 作为 占 位 符 ， 以 测试 排版 、 设 计 的 效果 。 这 段 





译 者 注 
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了 所 有 设备 默认 加 载 的 建议 数量 。 如 
果 我 想来 得 花哨 些 ， 我 可 以 写 一 些 服 
务 需 端 代码 或 JavaScript 动态 地 为 较 
大 的 屏幕 加 载 这 些 图 像 。 不 过 这 已 经 
超出 了 本 书 的 范围 。 

O 我 在 页 面 底部 添加 了 对 respond.js 的 
请 求 ， 从 而 让 媒体 查询 对 IE8 及 以 下 
版 本 也 有 效 。 参 见 “ 在 下 8 及 以 下 版 
本 中 呈现 媒体 查询 样式 ”。 











2. 选择 设计 实现 方法 

至 少 有 两 种 方法 可 以 实现 响应 式 页 面 。 
这 两 种 方法 使 用 相同 的 HTML， 只 是 某 些 
CSS 不 一 样 。 下 面 是 对 这 两 种 方法 的 概述 。 

方法 1: 为 所 有 的 设备 建立 基准 样式 ， 再 
从 小 屏幕 ( 移动 ) 做 起 , 逐渐 覆盖 大 屏幕 ( 桌面 ) 

(1) 首先 为 所 有 的 设备 提供 基准 样式 (如 
图 12.3.1 所 示 ) 。 这 通常 包括 基本 的 字体 格式 、 
颜色 ， 可 能 还 要 对 默认 的 外 边 距 和 内 边 距 设 
置 进行 微调 ， 但 不 包括 元 素 的 浮动 或 定位 。 
内 容 将 按照 常规 的 文档 流 由 上 到 下 进行 显示 。 
网 站 的 目标 是 在 单列 显示 样式 中 是 清晰 的 、 
中 看 的 ( 如 图 12.3.2 所 示 ) 。 这 样 ， 网 站 对 
所 有 的 设备 ( 无 论 新 旧 , 只 要 带 有 Web 浏览 器 ) 
都 具有 可 访问 性 。 在 不 同 设备 下 ， 外 观 可 能 
有 差异 ， 不 过 这 是 在 预期 之 内 的 ， 完 全 可 以 
接受 。 

(2) 从 这 种 样式 开始 ， 使 用 媒体 查询 
逐渐 为 更 大 的 屏幕 (或 其 他 媒体 特性 ， 如 
orientation) 定义 样式 。 大 多 数 时 候 ，min- 
width 和 max-width 媒体 查询 特性 是 最 主要 的 
工具 (参见 图 12.3.3 ~ 图 12.3.10 ) 。 

这 种 方法 通常 称 为 移动 优先 的 啊 应 式 
Web 设计 。 

方法 2: 为 桌面 环境 构建 网 站 ， 再 处 理 不 
同 的 设备 屏幕 尺寸 






















































































(1) 先 为 网 站 的 桌面 版 本 添加 样式 ( 参见 
第 11 章 ) 。 

(2) 使 用 媒体 查询 为 其 他 更 小 的 屏幕 尺寸 
Tiii EX. 

第 一 种 方法 遵循 渐进 增强 的 原则 ， 因 
此 它 在 Web 圈子 里 具有 很 大 的 吸引 力 。 为 
了 让 你 掌握 这 种 方法 ， 我 将 在 示例 中 使 用 这 
种 方法 。 如 果 你 想 尝试 第 二 种 方法 ， 可 以 以 
第 11 章 结 束 时 的 页 面 为 起 点 ， 根 据 你 在 这 
里 学 到 的 知识 ， 为 更 小 的 屏幕 尺寸 添加 媒体 
查询 。 














/* 基准 样式 


body { 
color: #1d3d76; 
font: 10096 "Trebuchet MS", Verdana, 
» sans-serif; 


logo ( 
color: #b74e07; 
font-weight: bold; 


h1 { 
font-size: 1.25em; /* 24px/16px */ 
text-transform: lowercase; 


} 


.nav li { 
display: inline; 
font-size: .7em; 


} 














12.3.1 应 用 于 所 有 设备 的 基准 样式 示例 。 这 
些 样 式 规 则 与 你 在 本 章 之 前 看 到 的 其 他 代码 是 类 似 
的 ， 只 是 它们 没有 由 媒体 查询 包围 
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图 12.3.2 iPhone 支持 媒体 查询 ， 但 我 还 未 将 媒体 
查询 添加 到 样式 表 里 。 我 只 写 好 了 基准 样式 ， 因 此 
这 些 屏幕 截图 可 以 表示 不 支持 媒体 查询 的 浏览 右 呈 
现 页 面 的 样子 。 页 面 的 布局 是 线性 的 ， 右 侧 图 像 出 
现在 recent entries s 的 下 广 o 页 脚 在 这 些 内 容 的 下 面 ， 
但 这 里 没有 显示 出 来 










































































3. 逐步 完善 布局 

好 了 , 现在 你 已 经 把 内 容 聚 集 到 了 一 起 ， 
Hi 看 义 化 HTML 对 它们 进行 了 标记 ， 并 决 
定 使 用 方法 1 实现 你 的 设计 。 图 12.3.1 ~ 图 
12.3.10 显示 了 如 何 从 适用 于 所 有 设备 的 基准 
样式 开始 ， 逐 渐 添 加 样式 ， 直 到 拥有 一 个 适 
合 一 系列 视觉 区 域 尺寸 和 设备 的 布局 。 

如 果 用 上 响应 式 Web 设计 的 术语 ， 这 一 
过 程 可 以 表述 为 ， 使 用 媒体 查询 为 页 面 中 的 每 
个 断 点 (breakpoint ) 定义 样式 。 断 点 即 内 容 需 
作 适 当 调 整 的 宽度 。 在 本 例 中 ， 我 为 下 列 断 点 
创建 了 样式 规则 。 记 住 , 对 于 每 个 最 小 宽度 ( 没 
有 对 应 的 最 大 宽度 ) ， 样 式 定位 的 是 所 有 宽度 
大 于 该 min-width 值 的 设备 ， 包 括 台 式 机 。 

口 320 像素 的 最 小 宽度 ( 如 图 12.3.3 和 
图 12.3.4 所 示 ) 。 定 位 纵向 模式 下 的 
iPhone, iPod touch 、 各 种 Android 以 
及 其 他 移动 电话 。 


























口 480 像素 的 最 小 宽度 ( 如 图 12.3.5 和 
图 12.2.6 所 示 ) 。 定 位 大 一 些 的 移动 

电话 ， 如 某 些 HTC 机 型 ， 以 及 横向 模 
式 下 的 大 量 320 像素 设备 (iPhone, 
iPod touch 及 某 些 Android 机 型 ) 。 

口 600 像素 的 最 小 宽度 (如 图 12.3.7 和 图 
12.3.8 所 示 ) 。 主 要 是 为 罕 的 桌面 浏览 
器 设置 这 些 样式 ， 不 过 ， 它 们 照例 适 
用 于 任何 显示 为 此 最 小 宽度 的 设备 。 

口 600 像素 的 最 小 宽度 和 767 像素 的 最 大 
宽度 之 间 (参见 图 12.3.7 和 图 12.3.8 ) 。 
在 此 范围 内 ， 报头 的 布局 被 切断 了 (无 

论 对 桌面 浏览 带 窗 口 大 小 怎样 调整 ， 
et et RERON 

建 了 这 部 分 样式 对 其 进行 了 清理 ， 填 
补 了 与 最 后 的 断 点 之 间 的 差距 。 

O 768 像素 的 最 小 宽度 ( 如 图 12.3.9 和 
图 12.3.10 所 示 ) 。 这 适应 于 各 种 新 
旧 浏 览 器 ， 以 及 iPad 和 其 他 的 平板 

电脑 。 



























































/* 基准 样式 


EE E E */ 
@media only screen and (min-width: 
320px) { 


.photo { 
float: left; 
} 








} 


图 12.3.3 ”我 为 视觉 区 域 至 少 有 320 像素 宽 的 设备 
添加 了 一 条 样式 规则 ， 让 博客 文章 里 的 文本 包 在 图 
像 周围 (参见 图 12.3.4). 我 并 未 将 这 条 样式 规则 包 
含 在 基准 样式 里 ， 因 为 一 些 移 动 电话 ( 甚至 是 智能 
手机 ) 的 屏幕 更 窗 ， 会 让 图 像 旁 边 的 文本 由 于 显示 
空间 太 窗 而 变 得 难以 阅读 
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12.3.4 由 于 使 用 了 图 12.3.3 中 定义 的 媒体 查 
询 ， 博 客 文章 中 的 文本 环绕 在 图 像 的 周围 。 该 样式 
对 iPhone 是 有 效 的， 因为 其 纵向 模式 下 的 视觉 
域 有 320 像素 宽 



































PX 








DOE RONDE Ep RES */ 
@media only screen and (min-width: 320px) { 


} 


/* 大 于 等 于 480px 
A E */ 
@media only screen and (min-width: 


480px) { 


.intro { 
margin: -.9% 0 0 110px; 
} 


.entry .date { 
margin: 0; 
text-align: right; 
position: relative; 
top: -1em; 


#main .continued { 
margin-top: -1%; 
text-align: right; 

} 


} 











12.3.5 现在， 样式 表 中 有 了 和 定位 视觉 区 域 至 少 
为 480 像素 的 设备 的 媒体 查询 。 这 样 的 设备 包括 屏 
幕 更 大 的 手机 ( 如 某 些 Android 机 型 ) ， 以 及 横向 
模式 下 的 iPhone (参见 图 12.3.6 ) 














Carrier c 7:48 AM =| 
Cathedral Cloister 





June 24, 2011 


utside it feels like a battle is raging, with 
firecrackers going off left and right in honor 
of Sant Joan, but in the cloister of 


Barcelona's 12th century Cathedral, it's quiet 
enough to hear the trickle of the water from 
the fountain. As everywhere else in 
Barcelona, Saint George is slaying his dragon 
here. Somehow... 























12.3.6 ”这 是 在 480 像素 宽 的 屏幕 下 显示 页 面 中 
部 的 样子 。 由 于 具有 了 更 多 的 屏幕 空间 ， 我 让 文本 
不 再 包 在 图 像 周围 ， 并 让 日 期 和 continued 向 右 对 齐 




















/* 基准 样式 


eR pe A */ 
/* 大 于 等 于 320px 
———Á—— */ 

@media only screen and (min-width: 320px) { 
) 

/* 大 于 等 于 480px 

—€———— — */ 

@media only screen and (min-width: 480px) { 
} 

/* 大 于 等 于 600px 

—————— AE */ 


@media only screen and (min-width: 
600px) { 


#container { 
background: url(../img/bg-bluebench. 
* jpg) repeat-y; 
margin: 20px auto; 
padding: 30px 10px 0 0; 
width: 90%; 
} 


.logo { 
float: left; 
font-size: 2em; /* 32px/16px */ 


} 


J 


/* 600px ~ 767px% ^] 











( 接 下 页 左 栏 代码 ) 


236 第 12 章 样式 表 一 一 从 移动 设备 到 台式 机 





( 续 上 页 右 栏 代码 ) 





@media only screen and (min-width: 
600px) 
>and (max-width: 767px) { 


.logo { 
background: #eee; 
font-size: 1.825em; 


} 


#masthead form { 
width: 235px; 
} 


input[type="text"] { 
width: 130px; 


} 

.nav li { 
font-size: .625em; 
font-weight: bold; 
padding-left: 1%; 

} 


} 














E 12.3.7 “这些 媒 体 查询 开始 让 报头 从 线性 布局 转 
为 水 平 样式 。 它 证 页 面 在 宽度 适中 的 桌面 浏览 需 上 
显得 更 为 好 看 (如 图 12.3.8 所 示 ) 
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Hospital Sant Pau June 26, 2011 
saga The Saint Paul Hospital at the top of Gaudí Avenue in 
UB. the Sagrada Família neighborhood is an 
A E -ft-overlooked gem of modernist architecture. 
Although the building was begun in 1902 under the 
direction of the architect Lluís Domènec i Montaner, | 





the hospital itself dates from the 14th century. It 
serves some 34,000 inpatients yearly, along with 
more than 150,000 emergency room... 


Cathedral Cloister June 24, 2041 







Outside it feels like a battle is raging, with 

WA firecrackers going off left and right in honor of Sant 
Joan, but in the cloister of Barcelona's 12th century 
Cathedral, it's quiet enough to hear the trickle of 
the water from the fountain. As everywhere else in 
Barcelona, Saint George is slaying his dragon here. 


图 12.3.8 使 用 图 12.3.7 中 的 样式 ， 页 面 已 经 接近 
其 完整 形式 。 现 在 ， 内 容 的 布局 仍 为 单 栏 ， 但 搜索 
框 和 主导 航 移 到 了 标识 旁边 。 同 时 ， 页 面 周围 的 背 
景 图 像 也 第 一 次 出 现 了 


E 



































/* 基准 样式 


— ———— */ 
@media only screen and (min-width: 320px) { 


} 


/* 大 于 等 于 480px 
BEE SE SE ERE */ 
Gmedia only screen and (min-width: 480px) { 


} 


/* 大 于 等 于 600px 
es */ 
Gmedia only screen and (min-width: 600px) { 


} 


/* 600px ~ 767px ii] 

— ————— E */ 

@media only screen and (min-width: 600px) and 
» (max-width: 767px) { 


} 


/* 768px 

a */ 
@media only screen and (min-width: 
768px) { 


#container { 
max-width: 950px; 


} 

#page { 
padding-left: 0; 
width: 97.9167%; 

} 

.nav li ( 
display: list-item; 
float: left; 
font-size: .75em; /* 12px/16px */ 

} 

#main { 


float: left; 
width: 71%; 





( 接 下 页 左 栏 代码 ) 





12.3 ”构建 适用 于 媒体 查询 的 页 面 237 





( 续 上 页 右 栏 代码 ) 














#related { 
margin-left: 72%; 

} 

#footer { 
clear: both; 

} 

} 
12.3.9 这 是 最 终 的 媒体 查询 ， 定 位 至 少 有 768 





像素 宽 的 视觉 区 域 。 该 媒体 查询 对 大 多 数 桌面 浏览 
器 ( 除非 用 户 让 窗口 变 窗 ， 就 像 图 12.3.8 那样 ) 来 
说 都 为 真 ， 它 同时 也 适用 于 纵向 模式 下 的 iPad 及 
其 他 一 些 平板 电脑 (参见 图 12.3.10 ) 






































iOS Simulator - iPad / iOS 5.0 (9A334) 
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图 12.3.10 ”使 用 图 12.3.9 中 的 样式 ， 页 面 变 得 完 
整 了 。 这 里 显示 的 是 在 iPad 中 页 面 显示 的 样子 ， 
在 桌面 浏览 器 中 (尽管 要 宽 一 些 ) 也 是 类 似 的 。 由 





















































于 宽度 是 用 百分数 定义 的 ， 因 此 主体 内 容 栏 和 侧 栏 
会 自动 伸展 





你 的 断 点 可 能 跟 此 处 用 的 不 同 。 这 取决 
于 哪些 断 点 对 你 的 内 容 、 设 计 和 受众 来 说 是 
合适 的 。 

例如 ， 有 人 会 定义 (min-width: 992px) 
的 媒体 查询 ， 有 时 还 会 为 更 高 的 分 辨 率 再 
定义 一 个 媒体 查询 。 相 反 ， 我 在 示例 页 面 
的 #container 选择 器 中 添加 了 max-width: 
950px; ( 参见 图 12.3.9) 。 这 样 ， 页 面 在 950 
像素 内 是 灵活 的 ， 但 在 超过 这 一 宽度 以 后 就 
不 再 继续 伸展 ， 因 此 我 不 会 为 大 于 该 值 的 宽 
度 指 定 媒体 查询 。 注 意 这 个 max-width 是 布局 
的 属性 ， 并 非 像 (max-width: 950px) 中 的 媒 
体 查询 特性 。 

也 可 以 使 用 与 设备 视觉 区 域 宽度 不 完全 
相同 的 值 作 为 断 点 。 如 果 基 于 (min-width: 
700px) 的 媒体 查询 是 呈现 内 容 的 最 佳 方式 ， 
就 可 以 使 用 该 媒体 查询 。 这 样 的 话 ， 也 不 一 
定 要 用 像素 作为 单位 。 可 以 使 用 em 创建 媒体 
查询 ， 如 (min-width: 20em)。 
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移动 编码 和 测试 工具 
在 移动 电话 和 平板 电脑 上 测试 页 面 是 
一 件 很 有 挑战 的 事 ， 因 为 你 可 能 很 难 真正 
在 各 种 设备 上 进行 操作 。 在 编码 和 开始 最 
初 的 测试 时 ， 有 一 些 值得 使 用 的 技巧 和 工 
具 ， 尽 管 使 用 它们 与 在 真实 的 设备 上 测试 
并 不 完全 一 样 。 
口 在 编写 样式 的 时 候 ， 调 整 桌面 浏览 
器 窗口 的 大 小 ， 使 窗口 大 约 等 于 各 
种 移动 电话 和 平板 电脑 的 视觉 区 域 
大 小 。 这 肯定 是 一 种 相当 粗略 的 方 
法 ， 但 它 确 实 可 以 帮 你 测试 样式 ， 
从 而 减少 在 设备 上 测试 以 后 进行 调 
整 的 工作 量 。 此 外 ， 来 回 拖 动 浏览 
器 窗口 也 可 以 测试 页 面 布 局 为 适应 
不 同 桌 面 浏览 器 进行 调整 的 情况 。 





238 第 12 章 样式 表 一 一 从 移动 设备 到 台式 机 





口 在 开发 的 起 步 阶 段 ， 使 用 ProtoFluid 口 使 用 为 其 他 设备 和 移动 浏览 器 设计 的 


(www.protofluid.com ) 。 这 是 一 款 
免费 的 、 基 于 浏览 器 的 工具 ,提供 
符合 一 些 流行 设备 尺寸 的 视图 。 需 
要 强调 的 是 ， 这 款 软 件 不 能 用 于 正 
式 测 试 ， 因 为 它 无 法 像 手 机 或 iPad 
那样 运行 ， 但 它 在 开发 的 起 步 阶 段 
还 是 很 有 帮助 的 。 (一 个 小 的 警告 
是 ， 该 软件 并 不 是 一 种 非常 直观 的 
工具 。 你 可 能 需要 捣 鼓 一 会 儿 才 能 
掌握 一 些 窍门 。) 要 在 ProtoFluid 
中 看 到 页 面 ， 需 要 将 页 面 存 放 到 服 
务 器 上 。 服 务 器 可 以 是 由 Web 主机 
提供 商 提供 的 (参见 第 21 章 ) ,也 
可 以 是 运行 在 你 自己 的 计算 机 上 供 
开发 用 的 服务 器 (在 网 上 搜索 “set 


up localhost server" ) . 


口 使 用 苹果 免费 提供 的 iOS Simulator 


测试 页 面 在 iPhone 和 iPad 上 的 显示 
效果 。 现 在 我 们 已 经 有 了 一 些 基础 ， 
该 软件 是 除了 在 真正 的 设备 上 测试 
以 外 最 好 的 工具 。 你 可 能 已 经 注意 
到 了 ， 我 在 一 些 屏幕 蕉 图 上 使 用 了 
这 一 了 工具。 不过， 该 软件 只 能 在 OS 
X 上 运行 ， 且 在 Windows 上 没有 
可 替代 的 软件 。iOS Simulator 是 免 
费 的 Xcode 的 一 部 分 ， 下 载 地 址 为 
http:/developerapple.comy/xcode/。 


口 使 用 Electric Mobile Simulator for Windows 


Cwww.electricplum.com/dlsim.html ) 。 
这 可 能 是 运行 在 Windows 上 最 好 的 
移动 设备 模拟 软件 了 。 当 然 ， 该 软 
件 并 不 是 苹果 的 iOS Simulator 的 替 
代 软 件 。 


仿真 器 和 模拟 器 。Mobile Boilerplate 
维护 了 一 个 针对 i1OS、Android、 
Nokia Symbian 等 设备 的 移动 仿真 
器 和 模拟 器 列表 ， 详 情 参 见 https/ 
github.com/h5bp/mobile-boilerplate/wiki/ 
Mobile-Emulators-&-Simulators ; 


如 果 幸 运 的 话 ， 你 身边 的 朋友 可 能 
一 些 不 同 设备 供 你 进行 测试 。 四 处 问 问 吧 ! 


4. 在 IE8 及 以 下 版 本 中 呈现 媒体 查询 样式 

对 于 先 编写 基准 样式 ， 再 使 用 媒体 查询 
对 设计 进行 调整 的 做 法 ， 有 一 点 需要 注意 ， 
就 是 Internet Explorer 8 及 以 下 的 版 本 不 支持 
媒体 查询 。 这 意味 着 这 些 浏览 器 只 会 呈现 媒 
体 查 询 以 外 的 样式 ， 即 基准 样式 。 对 大 部 分 
网 站 来 说 ， 使 用 IE6、IE7 和 IE8 的 用 户 合 起 
来 仍 上 右 有 较 大 的 比例 ， 因 此 你 可 能 希望 这 些 
访问 者 也 能 看 到 预期 的 设计 。 

Scott Jehl 着 手 修 复 了 这 一 问题 ， 他 创建 
了 一 个 轻 量 级 的 脚本 ， 即 respond.js， 该 脚本 
可 以 让 min-width 和 max-width 媒体 查询 在 TIE 
的 旧版 本 中 生效 。 该 脚本 位 于 https://github. 
com/scottjehl/Respond。 激 活 respond.min.js 链 
接 可 以 查看 代码 ， 将 代码 复制 到 文本 编辑 带 
里 ， 青 保存 为 respond.js 即 可 。 

尽管 这 段 脚 本 还 可 以 让 min-width 和 
max-width 媒体 查询 对 其 他 旧 浏 览 器 有 效 ， 但 
其 他 旧 浏 览 器 并 不 重要 ， 因 此 你 可 以 使 用 条 
件 注释 仅 让 TES 及 以 下 版 本 加 载 这 段 脚本 ， 
如 图 12.3.11 所 示 。 
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«footer id-"footer" 
role-"contentinfo"» 


«footer» 
«/div» 
«/div» 


<!--[if lte IE 8]> 
«script src-"assets/js/respond.js"» 
></script> 
<![endif]--> 
«/body» 
</html> 














E 12.3.11 将 script 元 素 放 在 条 件 注释 里 ， 只 有 
Internet Explorer 8 及 以 下 版 本 会 加 载 respond.js。 
将 src 值 里 的 assets/js/ 部 分 替换 为 你 的 网 站 上 
指向 respond.js 的 路 径 (如果 与 此 不 同 的 话 ) o 
置 完成 后 ，IE8 及 以 下 版 本 就 能 理解 媒体 查询 并 号 
现 相应 的 样式 了 











此 外 ， 如 果 你 计划 在 项 目 中 使 用 Modernizr 
(www.modernizr.com ) ， 你 可 以 通过 Modernizr 
的 配置 工具 将 respond.js 包含 在 内 ， 从 而 不 必 
单独 下 载 并 在 HTML 页面 中 调用 这 段 脚 本 。 
关于 Modernizr 的 更 多 信息 ， 参 见 14.3 节 ; 
关于 脚本 ， 参 见 第 19 章 。 











5. 构建 适用 于 媒体 查询 的 页 面 的 步骤 

(1) 创建 内 容 和 HTML, 

(2) 在 HIML 页 面 的 head 元 素 中 ,给 
人 «meta name-"viewport" content-"width- 
device-width, initial-scale-1.0" />。( 参见 
12.2 节 的 “理解 视觉 区 域 及 使 用 视觉 区 域 meta 
元 素 "。) 

(3) 选择 设计 实现 方法 。 推 荐 像 示 例 演示 
的 那样 ， 先 创建 适用 于 所 有 设备 的 基准 样式 ， 
使 用 媒体 查询 逐渐 进行 完善 。 不 过 ， 如 果 
你 愿意 ， 你 也 可 以 先 实现 桌面 布局 (参见 第 
11 章 ) ， 再 使 用 媒体 查询 为 屏幕 更 小 的 设备 







































































(4) 为 不 同 的 视觉 区 域 宽度 调整 适合 内 容 
的 布局 。 根 据 12.2 节 中 介绍 的 方法 (参见 图 
12.2.3、 图 12.2.5, 12.2.7 和 图 12.2.9) , 
识别 断 点 并 创建 相关 联 的 媒体 查询 。 在 这 个 
过 程 中 ， 应 尽 可 能 地 使 用 百分数 表示 width, 
margin 和 padding， 形 成 流 式 页 面 布 局 。 

(5) 如 果 你 想 让 IE8 及 以 下 版 本 呈现 min- 
width 和 max-width 媒体 查询 内 的 样式 规则 ， 
可 以 获取 respond.js (JL "E IES 及 以 下 版 
本 中 呈现 媒体 查询 样式 ”) 。 

(6) 如 果 执 行 了 第 (5) 步 ， 应 在 </body> 
结束 标记 上 面 输入 以 下 代码 ， 从 而 让 页 面 指 
[5] respond.js (参见 图 12.3.11 ) 。 

<!--[if lte IE 8]> 


«script src-"path/respond.js"» 
» </script> 


<![endif]--> 


其 中 path 指 的 是 你 网 站 上 JavaScript 3 
件 的 位 置 ，respond.js 是 你 保存 的 JavaScript 
文件 的 名 称 。script 元 素 周围 的 条 件 注 释 是 
可 选 的 。 

CD) 开始 测试 (参见 “移动 编码 和 测试 工具 ”)。 

(8) 根据 需要 ， 修 改 第 (4) 步 中 的 CSS 和 
媒体 查询 ， 并 进行 测试 ， 直 到 页 面 在 各 种 设 
备 下 都 呈现 出 预期 的 效果 。 


如 图 12.3.3、 图 12.3.5、 图 12.3.7 和 
图 12.3.9 所 示 ， 所 有 示例 页 面 的 样式 都 位 于 
一 个 样式 表 里 。 你 也 可 以 采用 12.2 节 中 指出 
的 方法 ， 链 接 到 分 离 的 样式 表 。 通 常 ， 使 用 
一 个 样式 表 的 性 能 更 优 ( 只 要 它 没 有 特别 大 )， 
因为 浏览 器 需要 下 载 的 文件 越 少 ， 呈 现 页 面 
所 用 的 时 间 就 越 少 。 





























Eivind Uggedal 的 http://mediaqueri.es ) 
网 站 汇集 了 大 量 现 实 的 响应 式 站 点 (数量 还 
在 增加 ) ， 值 得 借鉴 。 
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Mobile Boilerplate ( www.html5boiler- 
plate.com/mobile ) 是 一 个 编写 网 页 所 用 的 起 动 
模板 ， 其 中 包含 了 很 多 移动 开发 的 最 佳 实践 。 
它 背 后 的 团 Ce ( 既 包 括 
智能 手机 ， 也 包括 平板 电脑 ) 提供 了 一 组 方 
便 使 用 的 Me 范 ( https:;//github.com/h5bp/mobile- 
boilerplate/wiki/Mobile-Matrices ) 。 如 该 页 面 所 
述 ， 这 些 信息 对 设计 查询 是 非常 有 用 的 。 


如 果 你 想 定 位 高 像素 率 设 备 ( 如 
iPhone 4 和 使 用 Opera Mobile 11 浏览 器 的 手 
Ju) ， 可 以 使 用 以 下 媒体 查询 : 


@media only screen and (-webkit-min- 
» device-pixel-ratio: 1.5), only 
» screen and (-o-min-device-pixel- 
» ratio: 3/2), only screen and 
» (min-device-pixel-ratio: 1.5) { 
/* 样式 规则 */ 


} 
iX € Mobile Boilerplate 推荐 的 方法 。 


Andy Clarke 和 Keith Clark 创建 的 320 
and Up ( http://stuffandnonsense.co.uk/projects/ 
320andup/ ) 是 另 一 个 用 于 起 动 的 模板 。 它 反 
映 了 这 里 演示 的 方法 一 一 从 一 套 默 认 样 式 开 
始 ， 逐 渐 使 用 媒体 查询 对 布局 进行 放大 。 


Luke Wroblewski 很 好 地 总 结 了 构建 

T yi 点 有 关 事 项 的 当前 状态 ， 见 http:// 

www.lukew.com/ff/entry.asp?1436。 他 的 文章 
包含 了 一 些 扩展 阅读 材料 的 链接 。 


Maximiliano Firtman 维护 了 一 个 现代 
移动 设备 对 HTML5 和 CSS3 支持 情况 的 表格 ， 
JL http://mobilehtml5.org。 (其 中 大 量 信息 属 
T HTMLS5 高 级 特性 , 本 书 未 涉及 这 些 内 容 。) 


如 果 respond.js 不 管用 , 可 以 查看 https:// 
github.com/scottjehl/Respond 上 的 “Support & 
Caveats” ( 支持 与 注意 事项 ) 部 分 。 如 果 还 
有 问题 ， 可 以 试 着 将 图 12.3.11 中 突出 显示 的 
代码 放 到 页 面 的 《</head> 结束 标记 之 上 ， 而 非 
</body> 结束 标记 之 前 。 


更 多 关于 条 件 注释 的 信息 , 参见 wwwdqui 


Iksmode.org/css/condcom.html。 


提 示 
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本 章 内 容 

口 什么 是 Web 字体 

口 在 哪里 能 找到 Web 字体 

口 下 载 第 一 个 Web 字体 

口 使 用 @font-face 

口 对 Web 字体 添加 样式 及 管理 文件 大 小 











在 过 去 的 几 年 中 ， 我 们 看 到 了 在 万 维 
网 上 使 用 字体 的 复兴 。 过 去 ， 我 们 通常 只 能 
在 非常 有 限 的 字体 集中 进行 选择 ， 现 在 有 了 
Web 字体 ， 我 们 在 开发 Web 项 目 时 有 了 大 量 
字体 可 供 选 择 。 经 历 这 种 改变 既 让 人 着 迷 ， 
又 令 人 激动 。 

过 去 ,选择 字体 相当 简单 。 默 认 情 况 下 ， 
用 户 计 算 机 上 安装 的 字体 非常 有 限 ， 基 本 上 
就 那 几 种 。 这 就 是 大 多 数 网 站 在 body 的 样式 
中 一 成 不 变 地 指定 Georgia, Arial, Verdana 
或 Trebuchet 的 原因 。 这 些 字 体 在 字号 较 
小 时 看 起 来 很 不 错 ， 同 时 任何 一 台 Mac 或 
Windows 计算 机 都 安装 了 它们 。 

不 夸张 地 说 ， 现 在 ， 我们 已 经 处 于 一 个 
全 新 的 世界 。 


13.1 什么 是 Web 字体 


CSS 规则 @font-face 为 Web 字体 创造 了 
可 能 ， 该 样式 规则 允许 CSS 指向 服务 器 上 的 
一 种 字体 供 网 页 使 用 。 
































很 多 人 认为 Web 字体 是 新 生 事物 。 实 
bs E, Web 字体 大 约 在 1998 年 就 产生 了 。 
Netscape Navigator 4 和 Internet Explorer 4 均 
采用 了 这 种 技术 ,但 它们 的 实现 都 不 支持 标 
准 的 字体 文件 格式 ,因此 很 少 有 人 用 到 它们 。 
直到 将 近 十 年 以 后 ， 浏 览 器 才 开 始 采纳 这 种 
使 用 更 为 常见 的 字体 文件 格式 的 标准 ，Web 
字体 的 使 用 才 变 得 常见 起 来 。 


1. Web 字体 文件 格式 

Web 字体 可 以 使 用 一 系列 文件 类 型 。 

O Ex OpenType ( Embedded OpenType, 

.eot ) 。 在 使 用 @font-face H}, Internet 

Explorer 8 及 之 前 的 版 本 仅 文 持 内 航 

OpenType» [Ati OpenType 是 Microsoft 

的 一 项 专 有 格式 ， 它 使 用 数字 版 权 管 

理 技 术 防 止 在 未 经 许可 的 情况 下 使 用 

字体 。 

TrueDoc。Netscape Navigator 4.0 最 初 

采用 了 这 种 文件 格式 ， 但 之 后 就 不 再 

采用 也 未 获得 文 持 。 

口 TrueType ( .ttf) FI OpenType ( .otf ) o 
TrueType fll OpenType 是 桌面 计算 机 广 
泛 支持 的 标准 字体 文件 类 型 ，Mozilla 
Firefox (3.5 及 之 后 的 版 本 ) 、Opera 

(10 及 之 后 的 版 本 ) 、Safari (3.1 及 
之 后 的 版 本 ) Mobile Safari (iOS 4.2 
及 之 后 的 版 本 ) 、Google Chrome ( 4.0 














口 
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及 之 后 的 版 本 ) 及 Internet Explorer (9 
及 之 后 的 版 本 ) 均 文 持 它 们 。 
O 可 缩放 矢量 图 形 (Scalable Vector Grap- 
hics, .svg) 。 这 种 格式 用 于 其 他 格 
式 均 不 被 文 持 的 某 些 特殊 环境 ， 如 
Mobile Safari 的 早期 版 本 。 
O Web 开放 字体 格式 (Web Open Font 
Format, .woff) 。 这 种 较 新 的 标准 是 
专 为 Web 字体 设计 的 。Web 开放 字体 
格式 的 字体 是 经 压缩 的 TrueType 字体 
或 OpenType 字体 。WOFF 格式 还 允 
许 在 文件 上 附加 额外 的 元 数据 。 字 体 
设计 人 员 或 厂商 可 以 利用 这 些 元 数据 ， 
在 原 字 体 信 息 的 基础 上 ， 添 加 额外 的 
许可 证 或 其 他 信息 。 这 些 元 数据 不 会 
以 任何 方式 影响 字体 的 表现 ， 但 经 
户 请 求 ， 这 些 元 数据 可 以 呈现 出 来 。 
Mozilla Firefox ( 3.6 及 之 后 的 版 本 ) 、 
Opera( 11.1 及 之 后 的 版 本 )、Safari( 5.1 
及 之 后 的 版 本 ) 、Google Chrome ( 6.0 
及 之 后 的 版 本 ) 及 Internet Explorer (9 
及 之 后 的 版 本 ) 均 支 持 Web 开放 字体 
格式 。 考 虑 到 Web 开放 字体 格式 得 到 
的 广泛 文 持 ， 这 种 格式 可 能 会 被 选 为 
行业 标准 。 
2. Web 字体 的 浏览 器 支持 情况 
现代 浏览 器 对 Web 字体 的 支持 情况 普遍 
很 好 。 由 于 早期 的 浏览 器 仅 支 持 特 定 的 字体 
格式 ， 因 此 Web 开发 人 员 需 要 付出 一 些 额 外 
精力 应 付 这 些 早期 浏览 器 ,但 回报 是 在 所 有 
的 现代 桌面 浏览 需 甚 至 大 多 数 智能 手机 浏览 
器 上 实现 丰富 的 排版 。 


























3. 法 律 问题 
从 技术 层面 上 说 ， 字 体 都 是 小 的 软件 。 
我 认识 以 字体 设计 和 制作 为 生 的 人 ， 这 是 一 








种 艰苦 、 细 致 的 创造 性 活动 ， 没 有 强大 的 心 
智 是 做 不 了 这 份 工 作 的 。 出 于 这 一 原因 ， 即 
便 @font-face 功能 从 一 开始 就 存在 ， 这 项 
工作 还 能 激怒 一 些 人 也 就 不 难 理 解 了 。 毕 
竞 ， 如 果 浏 览 器 能 链接 并 下 载 某 种 字体 ， 意 
味 着 任何 人 都 能 下 载 并 在 自己 的 计算 机 上 
安装 这 种 字体 ， 无 论 他 们 是 否 购买 了 这 种 字 
体 。 这 就 是 为 什么 Web 设计 人 员 和 开发 人 
员 必 须 确 保 网 站 上 用 到 的 任何 字体 都 具有 在 
万 维 网 上 使 用 的 许可 。 大 多 数 厂商 和 字体 服 
务 提供 商 通 过 将 许可 作为 字体 购买 的 一 部 分 
或 菜单 选项 提供 这 种 许可 。 如 果 不 进行 购 
买 ， 你 可 以 将 字体 限定 在 免费 字体 的 范围 
内 ， 如 可 在 Font Squirrel ( www.fontsquirrel. 
com ) 或 The League of Moveable Type ( www. 
theleagueofmoveabletype.com ) 下 载 的 字体 。 
不 管 选用 哪 种 方式 ， 都 要 确保 对 项 目 中 使 用 
的 Web 字体 具有 稳定 的 权利 。 为 此 ， 你 可 以 
查看 购买 的 字体 的 许可 证 。 由 于 这 是 近期 的 
一 个 热点 话题 ， 你 要 购买 字体 的 厂商 的 网 站 
通常 会 提 到 这 些 信息 。 如 果 存 在 疑惑 ， 可 以 
跟 厂商 联系 ， 了 解 哪 些 权 利 是 允许 的 。 

如 果 你 购买 了 一 个 字体 ， 并 确切 地 知道 
可 以 将 其 用 做 Web 字体 ， 就 可 以 使 用 Font 
Squirrel 提供 的 免费 @font-face 生成 器 (www. 
fontsquirrel.com/fontface/generator ) 。 该 工具 可 
以 将 字体 转化 为 在 万 维 网 上 使 用 的 所 有 Web 
字体 文件 类 型 。 


13.2 ”在 哪里 能 找到 Web 字体 


在 网 站 上 使 用 Web 字体 有 两 种 方式 : 自 
托管 和 Web 字体 服务 。 这 两 种 方式 都 是 完全 
有 效 的 选项 , 不 过 二 者 差异 很 大 ， 各 有 利弊 。 
当 你 权衡 这 些 利弊 的 时 候 ， 你 会 发 现 并 非 所 
有 的 Web 字体 都 是 随处 可 见 的 。 你 可 能 会 发 
现 ， 即 便 你 想 采 用 自 托 管 的 方式 ， 你 需要 的 
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字体 也 只 能 来 自 Web 字体 服务 。 这 时 ， 你 可 
能 需要 寻找 一 种 接近 的 替代 方案 ,或 者 重新 
考虑 你 的 方法 。 在 作出 决定 之 前 ， 需 要 花费 
一 些 精力 权衡 所 有 的 选项 并 灵活 人 处 理 。 


1. 自 托管 

自 托管 Web 字体 是 一 种 更 为 传统 的 方式 ， 
也 是 本 章 将 逐步 进行 讲解 的 方式 。 字 体 来 源 
于 你 自己 的 服务 器 , 就 像 其 他 的 资源 ( 如 图 像 、 
CSS 文件 ) 一 样 。 如 果 需 要 与 字体 相关 的 花费 ， 
通常 也 是 一 次 性 的 购买 支出 ， 是 否 将 字体 文 
件 上 传 到 网 站 上 并 将 其 包含 到 代码 中 取决 于 
你 自己 。 

寻找 可 以 自 托管 的 字体 是 比较 容易 的 ， 
为 它们 的 数量 很 多 。 它 们 的 质量 和 价格 差 
异 很 大 (有 的 甚至 是 免费 的 ) 。 其 中 一 些 流 
行 的 自 托管 字体 来 源 如 下 。 
O Font Squirrel ( www.fontsquirrel.com ) 
O MyFonts ( http://myfonts.com ) 





























Q The League of Moveable Type ( www. 


theleagueofmoveabletype.com ) 





O FontShop ( www.fontshop.com ) 


2. Web 字体 服务 

Web 字体 服务 通常 提供 订购 Web 字体 的 
方法 。 这 种 方式 是 指 按 月 或 按 年 支付 使 用 字 
体 的 版 权 费 用 ， 而 不 是 彻底 买 断 字体 。 这 些 
服务 托管 字体 ， 为 用 户 提 供 一 小 段 代 码 放 在 
其 网 页 中 。 这 段 代 码 可 能 是 JavaScript， 也 可 
能 是 CSS， 这 取决 于 服务 自身 。 它 包含 了 从 
远程 服务 器 获取 字体 文件 并 将 其 显示 在 网 站 
上 这 一 过 程 所 需 的 全 部 代码 。 很 多 人 主张 使 
用 这 种 方式 ， 因 为 这 种 方式 通常 比 单独 购买 
字体 更 便宜 ， 而 且 它 让 用 户 有 机 会 尝试 很 多 
种 不 同 的 字体 。 

一 些 流行 的 Web 字体 服务 包括 : 

口 Typekit ( https://typekit.com ) 











Q Fontdeck ( http://fontdeck.com ) 

L1 Fonts.com ( www.fonts.com ) 

O WebINK ( www.webink.com ) 

D Google Web Fonts ( www.google.com/ 





webfonts ) 

按理 说 ，Web 字体 服务 可 以 提供 比 自 托 
管 更 多 的 特性 。 所 有 的 东西 都 存放 在 服务 需 
上 ,包括 字体 文件 。 如 果 出 现 了 更 好 的 字体 
文件 或 代码 ， 服 务 便 可 以 很 容易 地 将 它们 提 
供给 用 户 。 

此 外 ,在 这 类 服务 中 ， 很 多 都 使 用 
JavaScript Hx A 3X Ht Web 字体 的 代码 。 这 样 
做 有 一 些 好 处 ， 也 有 一 些 不 好 的 地 方 。 在 这 
一 过 程 中 ，JavaScript 做 了 不 少 工作 ， 包 括 
探测 加 载 页 面 的 浏览 器 ， 为 字体 本 身 的 加 载 
提供 额外 的 控制 。 这 种 控制 可 以 产生 更 好 的 
体验 ， 因 为 它 让 Web 字体 服务 可 以 自 定义 
字体 格式 和 提供 字体 的 代码 。 例 如 ，Typekit 
近期 宣称 ， 它 们 将 在 一 些 服 务 中 使 用 基于 
PostScript 的 轮廓 〈 仅 针对 Windows 浏览 器 ) 
显示 的 字体 ， 从 而 让 笔画 更 为 平滑 (http:/ 
blog.typekit.com/201 1/09/15/improvedwindows- 
rendering-for-more-typekit-fonts/ ) 。 如 果 没 有 
JavaScript， 这 类 特性 就 失效 了 。 

这 种 奢华 的 代价 当然 是 你 必须 百分之百 
地 依赖 JavaScript, WMR FP de Hop] Va ss rp E 
用 了 JavaScript， 他 们 就 无 法 看 到 你 的 Web 字 
体 。 此 外 ，JavaScript 会 影响 页 面 的 性 能 。 在 
Web 字体 呈现 在 页 面 上 之 前 ， 用 户 必 须 等 待 
JavaScript 加 载 完 成 。 这 是 你 决定 如 何在 网 站 
上 加 入 Web 字体 时 需要 记 住 的 事 ' 


























ee 


E 
Ho 


3. Web 字体 的 质量 与 显示 

KEE, HIENA KI Web 字体 都 是 一 
样 的 。 对 于 在 不 同 浏 览 器 中 Web 字体 显示 的 
效果 ， 它 们 具有 很 明显 的 差异 。 一 些 字 体 在 
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Internet Explorer 较 早 的 版 本 中 显示 效果 并 不 
太 好 ， 这 一 点 尤为 明显 。 

当 你 选择 字体 时 ， 要 尽量 检查 你 即将 选 
择 的 字体 在 各 种 浏览 器 中 显示 的 效果 ( 如 图 
13.2.1 所 示 ) o MWE, HFRS Web 字体 公 
司 提供 Web 字体 的 实时 示例 ， 有 的 公司 提供 
字体 在 不 同 浏览 器 和 平台 中 的 截图 ， 因 此 上 
述 工作 就 变 得 容易 多 了 。 











A TEST TO SHOW WEB FONT RENDERING. Internet Explorer 6 
HOW DO I LOOK? Windows XP 

A TEST TO SHOW WEB FONT RENDERING. Chrome 15 
HOW DO I LOOK? MacOSX 


图 13.2.1 这 张 合 成 的 截图 显示 的 是 相同 的 代码 在 
Internet Explorer 6 ( 上) 和 Chrome 15 ( P) 中 显 
示 的 效果 。 可 以 注意 到 ， 在 Internet Explorer 中 ， 
字母 的 笔画 更 细 ， 且 不 太平 滑 




















如 果 你 坚持 自己 测试 ， 可 以 尝试 Web 
Font Specimen ( http://webfontspecimen.com ) 

提供 的 工具 。 这 个 工具 可 以 让 你 查看 Web d 
体 在 不 同 环境 和 不 同 字 号 下 显示 的 效果 。 


13.3 下载 第 一 个 Web 字体 


下 载 免费 的 Web 字体 很 快 也 很 方便 。 我 
们 将 使 用 Font Squirrel， 它 提供 了 一 个 demo. 
html 文件 让 你 查看 这 些 字体 在 实践 中 的 效果 。 

下 一 节 ， 我 们 将 研究 Gfont-face 的 语法 
以 及 如 何 将 Web 字体 集成 到 页 面 中 。 


1. 从 Font Squirrel 下 载 Web 字体 
(1) 进入 Font Squirrel 的 efont-face 包 板 
块 (www.fontsquirrel.com/fontface ) ， 选 择 你 








(D @ 健 指 的 是 6font-face。 一 一 译 者 注 


想 使 用 的 字体 。 在 这 里 ， 我 选择 了 League 
Gothic; 

(2) 点 击 Get Kit ( 获取 包 ) 链接 ， 如 图 
13.3.1 所 示 ， 就 会 立即 开始 下 载 。 下 载 的 文件 
是 一 个 ZIP 压缩 包 。 

(3) 下 载 完 成 后 ， 打 开 压 缩 包 ， 就 会 看 到 
一 个 包含 Web 字体 、CSS 文件 和 demo.html 
文件 的 文件 来， 如 图 13.3.2 所 示 。 





League Gothic | 1 Font 
View Font | View Bff Demo | Get Kit 


League Gothic AaBhCc 


图 13.3.1. 如 果 你 想 在 下 载 之 前 进一步 查看 字 
体 ， 可 以 点 击 View Font ( 查看 字体 ) 了 解 关于 
字体 的 更 多 信息 ， 以 及 下 载 选 项 。 如 果 点 击 View 
@ff Demo ( 查看 @ff 示例) ， 则 可 以 看 到 使 
用 这 种 字体 作为 Web 字体 时 的 完整 范例 ， 这 是 
一 种 快速 测试 字体 在 不 同 浏览 器 中 显示 效果 的 
方法 















































eoo _ [A League-Gothic-fontfacekit 
7 items, 53.5 GB available 
| — Name ——  — —  — ^. Date Modified Size 
了 demo.html Yesterday 5:38 PM 1KB 





B League Gothic-webfont.eot Dec 23, 2010 5:24 AM 43 KB 
一 League Gothic-webfont.svg Dec 23, 2010 5:24 AM 52 KB 
[ League Gothic-webfont.ttf Dec 23, 2010 5:24 AM 43 KB 
Bl League Gothic-webfont.woff Dec 23, 2010 5:24 AM 23 KB 


司 SIL Open Font License 1.1.txt 
| stylesheet.css 


Yesterday 10:41 AM 4KB 
Yesterday 5:38 PM 508 bytes 











13.3.2 League Gothic 的 ZIP 压缩 包 展 开 后 的 
内 容 。 如 你 所 见 ， 有 一 个 demo.html 文件 、 四 个 
Web 字体 、 一 个 许可 证 和 一 个 样式 表 





2. 在 demo.html 文件 中 查看 所 选 字体 

在 浏览 器 中 打开 位 于 所 下 载 字 体 文件 来 
里 的 demo.html 文件 ， 如 图 13.3.3 所 示 ( 参见 
2790 3$ 
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eon Font face Demo. 


Font-face Demo for the League Gothic Font 


agn Gothie Roplar- Lorem ipsum dolor st amet cosctetur adipisicing t, sed do cusmod tempor cadunt vt laboro er magna aqu Wt enim ad 
minim veniam, qois nostrud exercitation olames laboris nisi ut aliquip er ea commod consequat.Duis aste inre dolor in reprehenderit in pato vt esse 
lum dolore ou fugiat nua pariatur. captu sint occaecat cupidatat m proident, sunt ia colga gui officia deserunt molit ain id est laborum. 











图 13.3.3. di! Web 字体 尽 显 魅力 


这 个 演示 文件 显示 ，Web 字体 确实 起 作 
用 了 。 这 是 非常 令 人 激动 的 ! 在 你 宣布 胜利 
并 准备 收工 之 前 ， 我 们 还 是 要 在 下 一 节 讲 讲 
其 中 的 工作 原理 。 


你 开始 下 一 节 项 目 之 前 ， 想 获得 字体 
选择 的 灵感 吗 ? Typekit 团队 写 了 一 篇 很 好 的 
博客 文章 ， 这 篇 文章 介绍 了 大 量 关于 Web F 
体 及 一 般 性 排版 的 有 用 信息 。 初学 者 可 以 尝试 
阅读 “Sites we like" — ( 我们 喜爱 的 站 点 ) A 
列 ， 参 见 http://blog.typekit.com/category/sites- 


welike/。 








需要 在 Photoshop 中 使 用 这 些 字体 
"m? 你 可 以 将 Web 字体 包 中 的 TrueType ( .ttf ) 
字体 装 到 你 自己 的 计算 机 上 。 安 装 完成 后 ， 
你 就 可 以 像 使 用 其 他 字体 一 样 使 用 该 字体 了 。 


13.4 ”使 用 @font-face 


你 已 经 下 载 了 Web 字体 包 ， 并 在 浏览 
中 测试 了 demo.html 文件 。 现 在 ,不 妨 看 看 
其 中 的 原理 。 首 先 ， 让 我 们 看 看 stylesheet.css 
中 的 代码 ( 参见 图 13.4.1 ) 。 

如 你 所 见 ， 样 式 表 相当 简单 ， 只 有 一 条 样 
式 规 则 。 不 可 否认 的 是 ， 这 条 规则 相当 重要 ! 

@font-face 语法 与 传统 的 CSS 相 比 有 些 
不 同 。 其 中 的 一 点 就 是 ， 它 并 未 像 你 从 第 8 

















章 起 接触 到 的 传统 方式 那样 ， 一 个 选择 器 后 
面 跟着 一 些 属性 / 值 对 。 这 条 样式 规则 以 看 起 
来 有 些 奇怪 的 @font-face 声明 开头 。 








@font-face { 
font-family: 'LeagueGothicRegular'; 
src: url('League Gothic-webfont.eot'); 
src: url('League Gothic-webfont.eot?fiefix') 
format('embedded-opentype"), 
url('League Gothic-webfont.woff') 
» format('woff'), 
url('League Gothic-webfont.ttf') 
» format('truetype"), 
url('League Gothic-webfont. 
> svgitLeagueGothicRegular') 
» format('svg"); 
font-weight: normal; 
font-style: normal; 


} 


13.4.1 这 是 Font Squirrel 在 字体 包 中 提供 的 
@font-face 样式 规则 。 可 以 注意 到 ， 它 使 用 了 单 引 
号 ， 而 不 是 本 书 其 他 CSS 示例 中 使 用 的 双 引 号 。 

在 CSS 中 ， 单 引号 和 双 引 号 的 效果 是 一 样 的 ， 
而 你 可 以 根据 自己 的 偏好 进行 选择 


为 了 搞 清 楚 efont-face 的 工作 原理 ， 
可 以 将 Gfont- face 样式 规则 理解 成 建立 一 种 
为 其 他 CSS 所 用 的 工具 。 这 条 规则 并 不 影响 
任何 特定 元 素 的 样式 ， 但 它 为 在 CSS 中 使 用 
Web 字体 打下 了 基础 。 

这 条 样式 规则 的 第 一 行 是 对 字体 系列 的 
指定 : 

font-family: 'LeagueGothicRegular'; 

这 条 声明 指出 了 这 种 Web 字体 的 名 称 。 
在 本 例 中 ， 我 们 使 用 LeagueGothicRegular, 
而 实际 上 它 可 以 是 你 选择 的 任何 字体 的 名 称 。 
你 可 以 选择 Banana 或 The Best Font Ever, 
这 取决 于 你 自己 。 

这 条 样式 规则 的 下 面 几 行 告诉 浏览 器 字 
体 文件 的 位 置 。 其 中 包括 为 所 有 支持 Web 字 
体 的 不 同 浏 览 右 准备 的 字体 文件 格式 。 这 些 
语法 看 起 来 有 些 吓人 ， 但 我 们 的 目的 并 不 是 
















































































246 第 13 章 使 用 Web 字体 





要 完全 地 理解 它们 。 如 果 你 想 进一步 深入 研 
究 ， 了 解 这 样 显示 的 原理 ， 我 向 你 推荐 Ethan 
Dunham 发 表 在 Fontspring 上 的 博文 (www. 
fontspring.com/blog/further-hardening-of-the- 
bulletproof-syntax ) 。 作 者 在 这 篇 文章 中 解释 
了 他 对 efont-face 语法 的 最 新 思考 。 


1. 将 Web 字体 包含 到 网 页 里 

我 们 讲 过 了 @font-face 的 语法 ,但 还 从 
来 没有 真正 地 将 Web 字体 放 到 网 页 里 去 。 让 
我 们 看 看 demo.html 的 代码 ， 并 研究 一 下 位 于 
页 面 顶部 的 CSS 代码 (如 图 13.4.2 所 示 ) o 














h1.fontface ( 
font: 60px/68px 'LeagueGothicRegular', 
» Arial, sans-serif; 

letter-spacing: 0; 


p.stylei ( 
font: 18px/27px 'LeagueGothicRegular', 
» Arial, sans-serif; 


} 


13.4.2 ”这 是 demo.html 文件 顶端 的 CSS。Font 
Squirrel 将 它 放 在 这 个 位 置 ， 是 出 于 演示 的 目的 。 在 
实践 中 ， 最 好 将 所 有 的 css 放 在 一 个 外 部 样式 表 中 

这 些 规 则 为 HTML 添加 了 League Gothic 
Web 字体 的 样式 。 在 第 一 条 样式 规则 中 ， 
60px/68px 指定 了 字体 大 小 和 行 高 。 在 示例 
中 我 们 以 像素 为 单位 指定 大 小 ， 但 你 也 可 以 
使 用 其 他 的 单位 。 在 字体 大 小 和 行 高 之 后 指 
定 了 'LeagueGothicRegular', Arial, sans- 
serifo 4010.22 节 所 述 ， 可 以 像 这 样 指定 多 
个 字体 系列 (以 逗号 分 隔 ) ， 即 所 谓 的 字体 
栈 。 如 果 浏 览 器 不 支持 字体 栈 中 的 第 一 个 字 
体 ， 便 会 尝试 下 一 个 字体 。 由 于 我 们 使 用 的 
是 Web 字体 ， 因 此 浏览 器 很 可 能 如 期 显示 该 
Web 字体 ， 但 使 用 字体 栈 仍然 是 一 种 很 好 的 
实践 方式 。 毕 竟 ， 并 非 所 有 的 浏览 天 都 支持 
Web 字体 。 























fr CSS 中 ，font 属性 引用 了 LeageGoth- 
icRegular， 这 也 是 @font-face 样式 规则 中 指 
定 的 font-family 名 称 。 更 重要 的 是 ， 它 是 像 
旧 定 其 他 字体 一 样 指定 这 一 字体 的 。 在 浏览 
WHO, League Gothic 就 像 是 在 安装 在 网 站 











访问 者 计算 机 上 的 字体 。 
既然 你 已 测试 成 功 ， 或 许 你 想 再 党 试 一 
些 其 他 的 Web 字体 ? 


我 们 的 下 一 项 任务 就 是 为 主 标题 使 用 
League Gothic 字体 ， 为 页 面 的 其 余 文 字 使 用 
Crimson 字体 。 


2. 使 用 多 种 Web 字体 的 方法 
回 到 Font Squirrel, F zi Crimson Web 字 体 包 ， 
其 中 包含 了 六 种 不 同 的 字体 , 如 图 13.4.3 所 示 。 








Crimson | 6 Fonts 
View Font | View @f Demo | Get Kit 


Crimson AaBbCcD 











134.3 ”如 你 之 前 做 过 的 ， 点 击 Get Kit 下 载 该 Web 
字体 包 的 ZIP 压缩 包 。 下 载 完 成 后 ， 将 压缩 包 解压 


3. 在 同一 个 项 目 中 使 用 多 种 Web 字体 

(1) 在 字体 包 文 件 夹 中 有 很 多 字体 。 我 
们 只 需要 其 中 的 少数 几 个 。 选 中 文件 名 为 
Crimson-Roman-webfont 的 四 个 Web 字体 文 
件 ， 将 它们 复制 到 我 们 之 前 操作 过 的 League 
Gothic 文件 夹 。 结 果 应 如 图 13.4.4 所 示 。 








eoa |] League-Cothic-fontfacekit 
Date Modified. Size 
Dec 23, 2010 12:11 AM B3 KB 








E Crimson-Roman-webfont.eot 


Dec 23, 2010 12:11 AM 122 KB 
Dec 23, 2010 12:11 AM 83 KB 
Dec 23, 2010 12:11 AM 47 KB 
Yesterday 11:49 PM 1KB 
Dec 23, 2010 6:24 AM 43 KB 
Dec 23, 2010 6:24 AM 52 KB 
Dec 23, 2010 6:24 AM 43 KB 
Dec 23, 2010 6:24 AM 23 KB 
Yesterday 11:49 PM 4KB 
Yesterday 11:49 PM 540 bytes 

















E1344 ”现在 ,我们 在 同一 文件 夹 中 有 了 两 种 Web 
字体 ,好 样 的 ! (关于 文件 的 组 织 ,参见 最 后 一 条 提示 。 ) 
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(2) 在 stylesheet.css 中 输入 以 下 样式 规则 : 
Qfont-face ( 


font-family: "CrimsonRoman"; 


src: url("Crimson-Roman- 
» webfont.eot"); 


src: url("Crimson-Roman- 
» webfont.eot?ttiefix") 


» format("embedded-opentype"), 


url("Crimson-Roman-webfont. 
» woff") format("woff"), 


url("Crimson-Roman-webfont. 
> ttf") format("truetype"^), 


url("Crimson-Roman-webfont. 
> svgitCrimsonRoman") 
» format("svg"); 


} 

我 敢 肯定 ， 这 些 代码 看 起 来 非常 熟悉 。 
现在 ， 我 们 的 样式 表 里 既 有 League Gothic 字 
体 的 样式 规则 ， 也 有 Crimson Roman 的 样式 
规则 。 下 一 步 是 添加 选择 器 ， 将 Crimson F 
体 用 到 页 面 中 去 。 

(3) 在 你 刚刚 输入 的 @font-face 样式 规则 
后 面 ， 从 新 的 一 行 输入 以 下 内 容 : 

body { 





font-family: "CrimsonRoman", 
' Georgia, serif; 


} 


(4) 在 新 的 一 行 ， 输 入 以 下 样式 规则 ， 对 
hi 添加 样式 : 








h1 { 
font-family: "LeagueGothic 
» Regular", Arial, sans-serif; 
font-size: 4em; 
font-weight: normal; 
} 


接 下 来 ,我 们 将 创建 一 个 新 的 HTML 文档。 
(5) 在 同一 个 文件 夹 ， 创 建 一 个 新 的 
HTML 文件 ， 并 命名 为 demo2.html. 
(6) 在 demo2.html 页 面 中 输入 以 下 代 
码 (注意 这 里 是 如 何 指 癌 我 们 刚才 编辑 的 
stylesheet.css 的 ) : 
«IDOCTYPE html» 





«html lang="en"> 
«head» 
«meta charset-"UTF-8" /> 


«title»Our Awesome Web Font 
» Examples«/title» 


«link rel="stylesheet" 
» href-"stylesheet.css" /> 


</head> 
<body> 
«article» 


«hi»Headlines Are Very 
» Important«/h1» 


«p»There is more to Philadel 
» phia than cheesesteaks, 
» Rocky and the Liberty Bell. 
* Did you know that Phila 
> delphia used to be the 
> capital of the United States? 
>You will also find that 
> Philadelphia has our nation's 
+ first Post Office, Hospital, 
>and free library. That Ben 
» jamin Franklin was one busy 
» fellow!«/p» 


«article» 
«/body» 
</html> 


(7) 在 Web 浏览 器 中 打开 demo2.html, i 
图 13.4.5 所 示 〈 参 见 2.7 节 ) 。 现 在 ， 你 的 字 
体 看 起 来 应 该 很 不 错 。 
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eoo Our Awesome Web Font Examples 
|| our Awesome Web Font Examples 


Headlines Are Very Important 


There is more to Philadelphia than cheesesteaks, Rocky and the Liberty Bell. Did 
you know that Philadelphia used to be the capital of the United States? You will 
also find that Philadelphia has our nation's first Post Office, Hospital, and free 
library. That Benjamin Franklin was one busy fellow! 

















13.4.5 ”标题 使 用 League Gothic 字体 ， 页 面 
其 余 文 字 使 用 Crimson 字体 


的 














我 们 使 用 了 来 自 Font Squirrel 的 字 
体 包 里 的 字体 系列 名 称 ， 如 LeagueGothic- 
Regular。 这 是 很 好 的 描述 性 名 称 ， 但 另 一 
种 学 派 认 为 应 该 使 用 更 为 语义 化 的 名 称 ， 如 
font-family: "Headline";。 选 择 这 种 方案 的 
一 个 好 处 是 ， 如 果 你 想 改 主意 ， 选 择 另 一 种 
Web 字体 (而 不 是 League Gothic) ， 你 只 需 
要 替换 @font-face 样式 规则 ， 并 将 字体 系列 
的 名 称 指定 为 Headline 即 可 。 


尽管 上 述 步 骤 和 示例 中 假定 字体 文 
件 、 样 式 表 和 HTML 页 面 均 位 于 同一 个 目录 ， 
但 在 实践 中 最 好 使 用 文件 夹 对 它们 进行 组 织 
(参见 2.6 节 ) 。 一 定 要 根据 需要 修改 HTML 
中 指向 样式 表 的 路 径 ， 以 及 CSS 中 指向 Web 
字体 的 路 径 (参见 1.7 节 ) 。 


13.5 对 Web 字体 添加 样式 及 
管理 文件 大 小 
Web 字体 比 常规 字体 要 复杂 一 些 ， 因 此 
在 操作 Web 字体 的 时 候 ， 有 一 些 要 注意 的 
jm. 





使 用 Web 字体 〈 尤 其 是 使 用 多 个 Web 字 
体 ) 的 潜在 风险 之 一 是 ， 它 们 可 能 会 增加 页 
面 的 “重量 ”。 我 在 这 里 谈论 的 不 是 生肉 和 
甜 甜 圈 ， 我 谈论 的 是 千 字 节 和 兆 字 节 。 

对 于 所 有 这 些 字体 来 说 ， 在 它们 显示 到 
页 面 上 之 前 , 都 需要 下 载 到 用 户 的 计算 机 上 。 
如 果 一 个 页 面 上 有 五 六 个 字体 ， 它 们 就 会 减 
慢 网 站 加 载 的 速度 , 尤其 是 对 移动 用 户 来 说 。 
我 的 建议 是 审慎 地 选择 Web 字体 。 如 果 你 发 
现 自己 使 用 了 七 个 Web 字体 ， 你 就 应 该 想 办 
法 对 这 些 字体 进行 整合 了 。 

节省 页 面 重量 的 一 种 方法 是 构造 子 集 

(subsetting ) 。 构 造 子 集 是 通过 仅 包 含 确定 
使 用 的 字符 削减 实际 字体 大 小 的 方法 。 例 如 ， 
如 果 对 标题 使 用 League Gothic 字体 ， 而 网 站 
的 设计 要 求 标 题 始终 使 用 大 写字 母 ， 没 有 使 
用 小 写字 母 的 需要 。 通 过 构造 子 集 ， 可 以 将 
小 写字 母 从 字体 中 移 除 ， 这 样 字体 文件 大 小 
就 会 减 小 一 些 。 

此 外 ， 对 于 很 多 字体 ， 你 还 可 以 选择 针对 
特定 语言 的 子 集 。 在 Font Squirel 浏览 字体 的 
时 候 ， 对 特定 的 字体 点 击 View Font 而 非 Get 
Kit， 就 可 以 在 下 载 字体 之 前 选择 “@font-face 
包 ” 查 看 针对 特定 语言 的 选项 。 解 释 子 集 构造 
的 具体 细节 已 经 超出 了 本 书 的 范围 ， 不 过 Font 
Squirrel 提供 了 帮助 你 进行 专家 级 子 集 构造 的 工 
具 Cwww.fontsquirrel.com/fontface/generator ) 。 

Web 字体 用 起 来 有 些 奇 怪 的 另 一 种 情景 
出 现在 当 你 想 对 它们 添加 一 些 基 本 样式 的 时 
候 。 需 要 记 住 的 是 ， 对 于 Web 字体 ， 每 个 字 
体 只 有 一 种 粗细 和 一 种 风格 。 如 果 你 想 使 用 
粗 体 或 斜体 ， 就 需要 为 它们 创建 单独 的 样式 
规则 ， 每 条 规则 对 应 一 个 Web 字体 文件 。 


添加 斜体 和 粗 体 的 步骤 
(1) 使 用 以 下 代码 中 突出 显示 的 部 分 ， 对 
demo2.html 文件 的 第 一 个 段落 进行 更 新 。 
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<p>There is more to Philadelphia 
»than cheesesteaks, Rocky and 
>the Liberty Bell. «em»Did you 
> know«/em» that Philadelphia 

> used to be the capital of the 
» United States? You will also 

» find that Philadelphia has 

» our nation's first Post Office, 
> Hospital, and free library. 
*That Benjamin Franklin was one 
» «b»busy«/b» fellow!«/p» 


(2) 刷新 Web 浏览 器 。 

段落 中 出 现 了 粗 体 和 和 斜体 的 样式 。 不 
过 , 事情 并 不 像 看 起 来 的 这 样 完美 。 实 际 上 ， 
Crimson Roman Web 字体 并 没有 内 置 的 粗 体 和 
斜体 样式 ,浏览 器 是 通过 将 常规 文本 的 笔划 
变 粗 一 些 来 模拟 粗 体 的 ， 通 过 将 常规 文本 稍 
微 倾斜 一 些 来 模拟 斜体 的 。 

这 种 假 斜 体 的 效果 是 很 明显 的 ， 即 便 是 
一 般 的 人 也 能 看 出 来 〈 参 见 图 13.5.1) 。 我 们 
需要 的 是 为 特定 字体 专门 设计 的 合理 的 粗 体 
和 斜体。 好 消息 是 ， 使 用 这 样 的 粗 体 和 和 斜体 
很 简单 ! 



































This is fake italic. It is not real. 


This is not fake italic. It is real. 











13.5.1. 哪 一 个 是 假 斜 体 ? 注意 小 写字 母 k、a 
和 f 


要 对 Crimson 字体 使 用 合理 的 粗 体 和 和 斜 
体 ， 必 须 先 获得 这 些 Web 字体 文件 ， 再 将 它 
们 复制 到 “在 同一 个 项 目 中 使 用 多 种 Web 字 
体 的 步 又 ”中 使 用 的 文件 夹 。 

(3) 找 到 Crimson-Bold 和 Crimson-Italic 
Web 字体 文件 ， 将 它们 的 全 部 格式 ( 总 共有 
八 个 文件 ) 复制 到 演示 项 目 文件 夹 (参见 图 
13.5.2) , 














eoo Lj League-Gothic-fontfacekit 

Date Modified Size 

E Crimson-Bold-webfont.eot Dec 23, 2010 12:12 AM 81KB 
==] Crimson-Bold-webfont.svg Dec 23, 2010 12:12 AM 122 KB 
[À Crimson-Bold-webfont.ttf Dec 23, 2010 12:12 AM 81KB 
E Crimson-Bold-webfont.woff Dec 23, 2010 12:12 AM 45 KB 
E Crimson-italic-webfont.eot Dec 23, 2010 12:10 AM 84 KB 
7*3 Crimson-Italic-webfont.svg Dec 23, 2010 12:10 AM 122 KB 
[3 Crimson-ttalic-webfont.ttf Dec 23, 2010 12:10 AM 84 KB 
E Crimson-Italic-webfont.woff Dec 23, 2010 12:10 AM 46 KB 
E Crimson-Roman-webfont.eot Dec 23, 2010 12:11 AM B3 KB 
=] Crimson-Roman-webfont.svg Dec 23, 2010 12:11 AM 122 KB 
[P Crimson-Roman-webfont.ttf Dec 23, 2010 12:11 AM 83 KB 
Bl Crimson-Roman-webfont.woff Dec 23, 2010 12:11 AM 47 KB 
| demo.html Yesterday 11:49 PM 1KB 
|.) demo2.html Today 12:50 AM 557 bytes 
E League Gothic-webfont.eot Dec 23, 2010 6:24 AM 43 KB 
"£5 League Gothic-webfont.svg Dec 23, 2010 6:24 AM 52 KB 
[P League Gothic-webfont.ttf Dec 23, 2010 6:24 AM 43 KB 
E League_Gothic-webfont.woff Dec 23, 2010 6:24 AM 23 KB 
司 SIL Open Font License 1.1.txt Yesterday 11:49 PM 4KB 
|) stylesheet.css Today 1:08 AM 1KB 














13.5.2 ”天 哪 ， 这 里 竟然 有 了 这 人 么 多 文件 ! 新 的 
Crimson 字体 的 粗 体 和 和 斜体 文件 应 该 位 于 Roman X 
件 的 旁边 。 ( 参见 最 后 一 条 提示 。) 

接 下 来 ， 跟 以 前 一 样 ， 需 要 添加 一 些 新 
的 @font-face 样式 规则 将 粗 体 和 斜体 文件 汪 
加 到 网 页 中 去 。 


(4) 在 stylesheet.css 中 输入 以 下 内 容 : 
@font-face { 
font-family: "CrimsonBold"; 

















src: url("Crimson-Bold-webfont. 
» eot"); 
src: url("Crimson-Bold-webfont 
» .eot?#iefix") format( 
» "embedded-opentype"), 
url("Crimson-Bold-webfont. 
» woff") format("woff"), 
url("Crimson-Bold-webfont. 
» ttf") format("truetype"), 
url("Crimson-Bold- 
> webfont.svgitCrimsonBold") 
» format("svg"); 


} 


@font-face { 
font-family: "CrimsonItalic"; 
src: url("Crimson-Italic- 
» webfont.eot"); 
src: url("Crimson-Italic- 
> webfont.eot?ttiefix") 
» format("embedded-opentype"), 
url("Crimson-Italic-webfont. 
» woff") format("woff"), 
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url("Crimson-Italic-webfont. 
+ ttf") format("truetype"), 
url("Crimson-Italic-webfont. 
> svg#CrimsonItalic") 
+ format("svg"); 


j 
(5) 将 以 下 样式 规则 添加 到 stylesheet.css 中 : 
bi 


font-family:"CrimsonBold", 
» Georgia, serif; 
font-weight: normal; 


} 


em { 
font-family:"CrimsonItalic", 
» Georgia, serif; 
font-style: normal; 


} 


第 一 条 样式 规则 为 b 元 素 设置 了 样式 ， 
将 字体 系列 设 成 了 Crimson Bold， 并 将 font- 
weight 设 成 了 normal。 如 果 你 忘 了 将 font- 
weight 设 为 normal， 保持 粗细 设置 不 变 ， 那 
么 浏览 器 就 会 让 粗 体 更 粗 ， 这 就 更 糟糕 了 ! 对 
em 元 素 的 处 理 也 是 类 似 的 ， 即 修改 字体 系列 ， 
J font-style 设 为 normal。 就 应 该 这 样 做 。 

(6) 在 Web 浏览 器 中 查看 demo2.html， 可 
以 看 到 合适 的 斜体 和 粗 体 (参见 图 13.5.3 ) 。 


























eoo Our Awesome Web Font Examples 
| 1.1 Our Awesome Web Font Examples 


Headlines Are Very Important 


There is more to Philadelphia than cheesesteaks, Rocky and the Liberty Bell. Did 
you know that Philadelphia used to be the capital of the United States? You will 
also find that Philadelphia has our nation's first Post Office, Hospital, and free 
library. That Benjamin Franklin was one busy fellow! 














E 13.5.3 这 里 有 多 个 Web 字体 ， 它 们 都 有 合理 


的 样式 











ED 可 以 对 任何 包含 文本 的 元 素 使 用 Web 
字体 的 粗 体 和 斜体 样式 ， 并 非 只 有 示例 和 步 
又 演示 中 的 那些 元 素 。 同 往常 一 样 ， 选 择 最 
能 准确 描述 内 容 的 HIML 元 素 ， 再 根据 需要 
对 其 添加 样式 。 


ED 记 住 ， 每 种 风格 和 粗细 都 需要 添加 新 
的 字体 文件 ， 这 会 增加 浏览 器 需要 下 载 的 文 
件 的 大 小 ， 从 而 对 性 能 产生 影响 。 出 于 这 一 
原因 ,很 多 设计 人 员 仅 对 标题 使 用 Web 字体 。 


有 一 种 更 为 简洁 的 书写 @font-face 代 
码 的 方法 ， 它 让 你 拥有 额外 的 粗细 和 风格 变 


化 ， 而 不 必 为 b、em 或 其 他 任何 需 icm 
体 或 斜体 的 元 素 编写 额外 的 样式 规则 。 

这 样 做 也 有 一 些 额 外 的 风险 ， B4 
Explorer 并 不 支持 这 种 方法 。 要 了 解 这 种 方 
法 ， 可 以 阅读 Roger Johansson 的 博客 文章 
( www.456bereastreet.com/archive/201012/font- 
face tip define font-weight and font-style to - 


keep your css simple/) 。 


如 果 使 用 Typekit 或 其 他 的 使 用 Java- 
Script 的 Web 字体 服务 ， 需 要 查看 使 用 它们 
添加 字体 样式 的 方法 ， 因 为 它们 可 能 拥有 自 
身 的 编写 选择 器 的 方式 。 


EaD 尽管 步骤 和 示例 中 均 假定 字体 文件 、 
样式 表 和 HTML 页 面 位 于 同一 个 目录 ( 如 图 
13.5.2 所 示 ) ， 但 在 实践 中 最 好 使 用 文件 夹 对 
它们 进行 组 织 ( 参见 2.6 节 ) 。 一 定 要 根据 
需要 修改 HTML 中 指向 样式 表 的 路 径 ， 以 及 
CSS 中 指向 Web 字体 的 路 径 (参见 1.7 节 ) 。 


使 用 CSS3 进行 增强 








本 章 内 容 

Q 理解 厂商 前 绥 

口 浏览 硕 兼 容 性 速 览 

口 使 用 polyfill 实现 渐进 增强 
口 为 元 素 创建 圆 角 

口 为 文本 添加 阴影 

口 为 其 他 元 素 添 加 阴影 

口 应 用 多 重 背 景 

口 使 用 渐变 背景 

口 为 元 素 设置 不 透明 度 
































网 站 制作 者 多 年 来 面临 的 挑战 之 一 就 是 ， 
fii FH CSS 建立 丰富 布局 的 选择 是 很 有 限 的 。 
在 大 多 数 情况 下 ， 要 建立 丰富 的 布局 ， 就 需 
要 使 用 额外 的 HTML、CSS 及 大 量 图 像 。 这 
样 做 的 结果 就 是 ， 页 面 变 得 更 为 复杂 ， 可 访 
问 性 降低 ， 浏 览 器 需要 花 更 长 的 时 间 下 载 和 
显示 ， 同 时 ， 页 面 变 得 更 为 脆弱 ， 更 难 维护 。 

近年 来 ， 浏览 器 快速 吸纳 了 很 多 新 的 
CSS3 属性 ， 让 上 述 情况 有 了 改观 。 如 今 ， 仅 
使 用 CSS 创建 圆 角 、 渐 变 和 阴影 以 及 调整 透 
明度 等 已 经 变 成 现实 ， 这 也 减少 了 网 页 需要 
使 用 的 标记 和 网 像 的 数量 。 或 许 更 为 重要 的 
是 ， 这 让 页 面 在 处 理 能 力 较 弱 的 设备 (如 智 
能 手机 ) 以 及 台式 机 、 笔 记 本 电脑 上 下 载 和 
显示 的 速度 变 得 更 快 了 。 

随 着 CSS 的 持续 发 展 ， 不 同 浏览 器 对 新 





















































的 CSS 属 性 的 支持 程度 不 一 仍然 是 一 项 挑战 。 

在 本 章 中 ， 我 们 将 看 到 如 何 使 用 一 些 流行 
且 实 用 的 CSS3 属性 创建 贺 角 、 阴 影 和 渐变 ， 
对 一 个 元 素 使 用 多 重 背 景 ， 以 及 调整 透明 度 。 
我 们 还 将 看 到 浏览 器 厂商 和 Web 专业 人 员 如 
何 使 用 渐进 增强 的 哲学 ， 通 过 厂商 前 级 和 基于 
JavaScript 的 polyfill 缩小 浏览 器 之 间 的 差异 。 

本 章 的 代码 示例 可 以 在 本 书 的 配套 网 站 
上 找 到 (www.bruceontheloose.com/htmlcss/ 
examples/) 。 该 网 站 上 还 包括 结合 本 章 讨论 
的 CSS3 效果 的 其 他 一 些 示 例 。 


14.4 理解 厂商 前 缀 


尽管 很 多 属于 CSS3 范畴 的 特性 都 还 未 
进入 W3C 的 候选 推荐 标准 阶段 ( 意味 着 相应 
的 规范 已 经 完成 ) ， 它 们 的 大 部 分 都 已 经 被 
Firefox, Internet Explorer, Chrome, Safari 和 
Opera 的 新 版 本 实现 了 。 

尚未 完成 的 〈 以 及 偶尔 存在 竞争 的 CSS 
实现 是 有 可 能 发 生变 化 的 ， 为 了 应 对 这 种 情 
况 ， 浏 览 器 在 实现 一 些 CSS 特性 时 使 用 了 所 
谓 的 厂商 前 缀 。 这 样 ， 每 个 浏览 器 都 可 以 引 
入 自己 的 CSS 属性 支持 方式 ， 这 种 方式 不 会 
与 最 终 的 规范 发 生 冲突 ， 也 不 会 与 其 他 浏览 
带 发 生 冲 突 。 此 外 ,厂商 前 级 还 能 确保 将 来 
规范 成 熟 或 定稿 时 ， 现 有 的 使 用 实验 性 实现 
的 网 站 不 会 骨 溃 。 
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每 个 主流 浏览 器 都 有 其 自身 的 前 绥 : 
-webkit- ( Webkit/Safari/Chrome ) 、-moz- 
( Firefox ), -ms-( Internet Explorer ), -o-( Opera ) 
以 及 -khtml- ( Konqueror ) 。 你 可 能 想得到 ， 
它们 将 放置 在 CSS 属性 名 的 前 面 。 不 过 要 记 
住 的 是 ,不必 每 次 部 使 用 全 部 的 前 级 。 在 大 
多 数 情况 下 ,只 需要 -moz- 和 -webkit- RIZ, 
就 像 你 会 在 本 章 示 例 中 看 到 的 那样 。 为 了 更 
好 地 面向 未 来 ， 推 荐 在 最 后 写 上 一 条 无 前 绥 
版 本 的 声明 ， 如 图 14.1.1 所 示 。 

















div ( 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 


) 

















14.1.1 fii FH border-radius 属性 的 示例 。 该 
属性 需要 使 用 厂商 前 级 ( 如 前 两 条 声明 所 示 ) xx 
持 旧 版 本 的 Firefox 和 基于 Webkit 的 浏览 器 (如 
Chrome 和 Safari ) 。 这 些 浏览 器 的 新 版 本 已 不 再 
使 用 有 前 缀 的 属性 ， 开 始 使 用 无 前 级 的 属性 ( 即 如 
border-radius: 10px; ) 。 照 例 ， 样 式 规则 中 的 最 
后 一 条 声明 优先 级 最 高 ， 这 也 是 将 无 前 缀 版 本 放 在 
最 后 的 原因 

在 本 章 中 你 将 看 到 ， 这 样 做 意味 着 用 较 
少 的 HIML， 而 用 更 多 的 CSS 实现 所 需 的 
效果 。 

虽然 厂商 前 缀 通常 会 在 CSS 中 造成 大 量 
的 重复 ， 但 这 只 是 前 进 路 上 的 一 点 点 代价 ， 
同时 也 是 Web 专业 人 士 已 经 普遍 接受 的 代价 ， 
因为 他 们 已 经 找到 了 将 在 代码 中 添加 前 绥 的 
繁琐 工作 自动 化 的 方法 (参见 第 后 一 条 提示 )， 
如 图 14.1.2 所 示 。 


CES 并非 所 有 的 CSS3 属性 都 需要 使 用 为 
浏览 器 准备 的 前 级 , 如 text-shadow 和 opacity( 分 
别 参 见 14.5 节 和 14.9 节 )。 此 外 ， 并 非 所 有 
的 浏览 器 都 需要 在 属性 中 使 用 特定 的 前 级 。 
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14.1.2. CSS3 Generator 既是 一 种 实用 的 学 习 工 
具 ， 同 时 可 以 用 于 减少 书写 有 前 级 的 和 无 前 级 的 
CSS 属性 这 种 重复 的 工作 



































如 果 属 性 的 语法 在 定稿 之 前 发 生 了 
改变 ， 你 可 以 在 CSS 中 写 上 多 个 版 本 。 可 以 
在 本 章 对 border-radius 和 gradient 属性 的 
演示 中 找到 有 关 的 示例 (分别 参 见 14.4 节 和 
14.8 节 ) 。 每 种 浏览 器 只 会 解释 它 理解 的 语法 ， 
而 忽略 其 他 的 语法 。 


GE 示 | 
没有 要 求 ， 但 应 该 总 是 在 最 后 包含 该 属性 的 
无 前 缓 版本， 以 保证 未 来 仍然 可 用 (参见 图 
14.1.1) 。 这 样 ， 即 便 浏 览 器 未 来 支持 无 前 组 
的 属性 ， 也 不 会 产生 中 断 的 情况 。 


尽管 对 需要 包含 的 有 前 级 属性 的 顺序 


CSS3 Generator ( www.css3generator. 
com ) 等 服务 可 以 简化 创建 这 类 属性 的 工作 ， 
减少 输入 ， 节 约 时 间 。 其 他 用 于 生成 代码 的 工 
有 具 的 列表 参见 www.bruceontheloose.com/tools/。 


14.2 浏览 器 兼容 性 速 览 


由 于 浏览 絮 发 展 的 脚步 在 近 儿 年 明显 
地 加 快 了 ， 因 此 理解 这 些 新 的 CSS 属性 在 
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什么 时 候 会 得 到 预期 的 效果 就 很 重要 了 。 
这 里 给 出 了 浏览 器 对 本 章 将 要 介绍 到 的 属 
性 开始 提供 基本 支持 的 时 间 ， 如 图 14.2.1 
所 示 。 









































Dribbble 网 站 使 用 了 一 些 CSS3 属性 ， 
如 border-radius 和 CSS3 渐变 背景 ， 为 使 用 现代 

































































border-radius 1.0 9.0 1.0 3.0 10.3 
box-shadow 3.5 9.0 1.0 3.0 10.5 
text-shadow 3.0 10.0 1.0 14 10.0 图 14. 3. 1 
多 重 背景 3.6 9.0 1.0 13 10.0 
渐变 3.6 10.0 2.0 4.0 11.1 得 为 功能 
不 透明 度 10 9.0 10 2.0 10.0 
图 14.2.4. 这 个 表格 显示 了 浏览 器 第 一 次 支持 本 
章 将 要 讨论 的 各 个 CSS 属性 的 时 间 。 要 获得 更 





详细 的 分 类 ， 可 以 在 www.caniuse.com 或 www. 
&ndmsby is comi Damas 查找 各 个 属性 








14.3 ”使 用 polyfill 实现 渐进 增强 


渐进 增强 是 如 今 被 普遍 接受 的 一 种 建立 
Ce 它 强调 创建 所 有 用 户 都 能 访问 
论 使 用 什么 样 的 Web 浏览 器 ) 的 基本 
E m rh 
提供 增强 的 体验 。 简 单 地 说 ， 渐 进 增强 意味 


浏览 器 的 用 户 提供 更 为 丰富 的 体验 ， 同时 ， 它 也 记 
较 弱 的 浏览 器 着 想 
































在 不 支持 border-radius 的 旧 的 浏览 
(如 Internet Explorer 8 ) 中 查看 该 网 站 ， 体 验 就 会 
发 生 改 变 。 圆 角 ( 如 那些 药丸 状 的 导航 按钮 的 圆 角 ) 


14.3.2 





着 网 站 在 不 同 Web 浏览 锅 中 的 外 观 和 行为 
不 一 样 是 完全 可 以 接受 的 ， 只 要 内 容 是 可 访 
问 的 。 

Dribbble 网 站 (http:/dribbble.com ) 就 是 
































渐进 增强 的 一 个 实例 ， 如 图 14.3.1 所 示 。 通 
过 渐进 增强 ， 六 网 站 使 用 CSS3 Jof 


器 提供 更 丰富 的 体验 。 在 旧 的 浏览 器 (如 
Internet Explorer 8 ) 中 ， 该 网 站 呈现 出 稍微 不 
同 的 视觉 体验 ， 但 功能 并 未 削减 ， 如 图 14.3.2 
所 示 。 





变 成 直角 了 ， 但 功能 并 未 损失 ， 
是 渐进 增强 在 实践 中 的 一 个 方面 

如 果 你 想 弥 合 较 弱 的 浏览 器 与 较 强 的 浏 
览 器 之 间 的 功能 差异 ， 可 以 使 用 polyfill ( 通 
常 又 称 热 片 ，shim ) 。 

polyfill 通常 使 用 JavaScript 实现 ， 它 可 
以 为 较 弱 的 浏览 器 提供 一 定 程度 的 对 HTMLS 
和 CSS3 的 API 和 属性 的 支持 ， 同 时 ， 当 浏 
览 嚣 本身 就 有 具有 相应 的 能 力 时 ， 会 不 动 声色 
地 退 而 使 用 官方 的 文 持 。 需 要 注意 的 是 ， 这 
样 做 通常 会 对 性 能 产生 一 定 的 负面 影响 ， 


一 切 照 常 工作 。 这 
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因为 较 弱 的 Web 浏览 器 (尤其 是 旧版 本 的 
Internet Explorer ) 运行 JavaScript 的 速度 要 慢 
得 
Modernizr 的 网 站 ( www.modernizr.com ) 

上 可 以 找到 更 多 关于 渐进 增强 的 信息 ， 包 
括 负 责 填 补 旧 的 浏览 右 与 新 的 Web 技术 之 
间 差 异 的 各 类 polyfill。Modernizr 是 一 个 
JavaScript 库 (参见 图 14.3.3 ) ， 由 Faruk Ateş 
于 2009 年 创建 。 目 前 团队 成 员 还 包括 Paul 
Irish, Alex Sexton 和 Ryan Seddon。 更 多 关于 
Modernizr 的 信息 参见 提示 。 














S55 Modernizr 





Modernizr is an open-source 
JavaScript library that helps you 
build the next generation of 
HTMLS and CSS3-powered 


Download Modernizr 2 





Why use Modernizr? 
- F 


Get started with Modernizr 














14.3.3 Modernizr 是 一 个 JavaScript JÆ, E ft 
许 你 探测 浏览 器 是 否 支持 创建 优化 的 网 站 体验 所 需 
的 特定 的 HTML5、CSS3 及 其 他 的 特性 


wA, 浏览 器 要 么 鼓励 用 户 定期 下 载 
新 的 版 本 (Firefox, Safari 和 Internet Explorer 
均 采 用 这 种 方式 ) ， 要 么 悄 无 声息 地 在 后 台 
下 载 更 新 (Chrome 就 采用 这 种 方式 ) 。 


当 新 的 或 实验 性 的 CSS 可 用 时 ， 基 于 
JavaScript 的 工具 (如 Modernizr ) 可 以 提供 上 暗 
Bl 从 而 允许 你 使 用 CSS 和 JavaScript 对 页 

进行 渐进 增强 ， 为 更 强 的 浏览 器 提供 更 为 
e 同时 不 至 于 扔 下 其 他 的 浏览 器 
不 管 。 


GitHub 上 有 一 份 由 社区 维护 的 关于 实 
用 的 JavaScript polyfill 的 列表 (https://github. 
com/Modernizr/Modernizr/wiki/HTMLS5-Cross- 
Browser-Polyfills) ， 如 图 14.3.4 Pp zs, iX 43 
列表 也 是 Modernizr 项 目的 一 部 分 。 其 中 ， 
CSS3 Styles 部 分 里 的 项 目 尤 其 有 趣 ， 如 Jason 
Johnston 的 PIE ( www.css3pie.com ) , 它 可 
7A 7] Internet Explorer 6 ~ 9 针对 很 多 本 章 将 
要 介绍 的 CSS3 效果 提供 支持 (其 中 ，IE9 仅 
在 需要 显示 线 | 性 渐变 时 用 得 上 PIE， 对 于 其 他 
的 效果 ，IE9 具有 原生 的 支持 ) 。 注 意 
PIE 可 能 影响 网 站 在 这 些 旧 的 浏览 器 中 运行 的 
性 能 。 





enn HTMLS Cross Browser Polyfills - GitHub- 





@ ves cross Browser Polyhlis 


github Shinup ond Foulne | Exon — m" 

 Modemizr / Modernizr. Wat Fok oss (ms 
" — T E e mo m— 

Homo Page Who = Gt Acces 

HTML5 Cross Browser Polyfills Pape History 


Sc here we're collecting all the shims, fallbacks, and polyfils in order ta implant himis functionality in browsers that don' natively support ther. 





The general idea is that: we, as developers, should be able to develop with the HTMLS apis, and scripts can create the methods and objects that 
should exist. Developing in thia future-proof way means as users upgrade, your code doesnt have to change bul users will move to the better, native 


Looking for a way to conditionally load these scripts clientside based on feature detects? See Modernizr 











14.3.4 不 断 增长 的 JavaScript polyfill 列表 。 
JavaScript polyfill 可 以 为 并 不 原生 支持 HTMLS 和 
CSS3 特性 的 旧 的 浏览 器 提供 这 方面 的 支持 


14.4 为 元 素 创 建 圆 角 


使 用 CSS3， 可 以 在 不 引入 额外 的 标记 或 
图 像 的 情况 下 , 为 大 多 数 元 素 ( 包括 表单 元 素 、 
图 像 ， 甚 至 包括 段落 文本 ) 创建 圆 角 ， 如 
图 14.4.1 和 图 14.4.2 所 示 。 [E] margin 和 padding 
属性 一 样 ，border-radius 属性 也 有 长 短 两 种 
形式 的 语法 。 图 14.4.5 中 有 一 些 演示 border- 
radius 属性 不 同 用 法 的 基本 示例 。 
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«body» 

«div class-"all-corners"»«/div» 

«div class-"one-corner"»«/div» 

«div class-'elliptical-corners"»«/div» 
«div class-"circle"»«/div» 











</body> 
</html> 
14.4.1. 这 个 文档 包含 带 class 属性 的 示例 


div。 每 个 div 均 用 于 演示 border-radius 的 不 同 用 
法 和 不 同 语法 ， 包 括 创建 相同 的 四 个 圆 角 ， 使 用 长 
形式 语法 创建 单独 的 圆 角 ， 创 建 椭圆 形 圆 角 以 及 创 
建 圆 形 等 图 形 


D Rounded Corners 


14.4.2 Xf border-radius 属性 (包括 有 前 绥 
的 和 无 前 级 的 ) 的 浏览 絮 会 以 如 上 图 所 示 的 方式 将 
示例 呈现 出 来 。 注 意 ， 不 同 的 实现 之 间 可 能 存在 视 
觉 上 的 差异 , 尤其 是 在 旧版 本 的 Safari 和 Firefox 中 , 
差异 更 为 明显 
































1. 为 元 素 创 建 四 个 相同 的 圆 角 

(1) 输入 -moz-border-radius: r, iX Hf 
r 是 圆 角 的 半径 大 小 ， 表示 为 长 度 ( 带 单 位 ) ， 
如 图 14.4.3 所 示 。 


(2) 输入 -webkit-border-radius: r, 3X 
里 的 工 是 圆 角 的 半径 大 小 ， 使 用 与 第 (1) 步 中 
相同 的 值 。 

(3) 输入 border-radius: rz， 这 里 的 上 是 
圆 角 的 半径 大 小 , 使 用 与 第 (1) 步 中 相同 的 值 。 
这 是 该 属性 的 标准 短 形式 语法 。 





div { 
background: #999; 
float: left; 
height: 150px; 
margin: 10px; 
width: 150px; 

} 


.all-corners { 
border-radius: 20px; 


} 


.one-corner { 
-moz-border-radius-topleft: 75px; 
-webkit-border-top-left-radius: 75px; 
border-top-left-radius: 75px; 


} 


.elliptical-corners { 
-moz-border-radius: 40px / 20px; 
-webkit-border-radius: 40px / 20px; 
border-radius: 40px / 20px; 


} 


.circle { 
-moz-border-radius: 75px; 
-webkit-border-radius: 75px; 
border-radius: 75px; 


} 











14.4.3 四 个 border-radius 示例 的 CSS 包括 
了 用 于 支持 旧版 本 的 Firefox 和 Safari 的 带 厂 商 前 
级 的 属性 。 注 意 Opera 10.5 和 Internet Explorer 9 
不 需要 使 用 有 前 绥 的 属性 。 更 多 信息 参见 图 14.4.4 
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Firefox 
Firefox 3.6 


-moz-border-radius-topleft 
-moz-border-radius-topright 
-moz-border-radius-bottomleft 
-moz-border-radius-bottomright 





Webkit 
Safari 3 and 4 
Chrome 3 


-webkit-border-top-left-radius 
-webkit-border-top-right-radius 
-webkit-border-bottom-left-radius 
-webkit-border-bottom-right-radius 


标准 的 CSS3 
语法 


border-top-left-radius 
border-top-right-radius 
border-bottom-left-radius 
border-bottom-right-radius 


Firefox 4 

Chrome 4 

Safari 5 

Internet Explorer 10 
Opera 10.5 








14.4.4 不 同 的 长 形式 border-radius 语法 ， 
包括 用 于 支持 Firefox 3.6 和 Webkit (Safari 和 
Chrome ) 的 语法 ， 以 及 被 大 多 数 新 发 布 的 浏览 

采用 的 官方 无 前 级 语法 

















2. 为 元 素 创建 一 个 圆 角 

(1) 输入 -moz-border-radius-topleft: r, 
这 里 的 了 是 左上 方圆 角 的 半径 大 小 ， 表 示 为 
IHE ( 带 单 位 ) 。 这 是 用 于 Firefox 4.0 之 前 
的 版 本 的 非 标准 的 旧 语 法 (参见 倒数 第 二 条 
提示 )。 如果 不 介 意 在 这 些 版 本 中 显示 为 方 角 ， 
就 可 以 跳 过 这 一 步 ( 参见 图 14.4.3 ) 。 

(2) 输入 -webkit-border-top-left-radius: 
fr， 这 里 的 使 用 与 第 (1) 步 中 相同 的 值 。 

(3) 输入 border-top-left-radius: r, 这 
里 的 了 上 是 左上 方圆 角 的 半径 大 小 ， 表 示 为 长 
度 ( 带 单位 )。 这 是 该 属性 的 标准 长 形式 语法 。 

注意 这 些 步 又 仅 演示 了 如 何 创 建 左上 方圆 角 ， 
此 外 , 还 可 以 单独 创建 其 他 方位 的 圆 角 , 步 又 如 下 。 

口 创建 右上 方圆 角 : 用 top-right 替换 
第 2) 步 和 第 (3) 步 中 的 top-left。 
作为 可 选 的 一 步 ， 用 topright 蔡 换 第 
(1) 步 中 的 topleft。 

OQ 创建 右 下 方圆 角 : 用 bottom-right 替 
换 第 Q) 步 和 第 3) 步 中 的 top-left, 
作为 可 选 的 一 步 ， 用 bottomright 替换 
第 (1) 步 中 的 topleft。 





























a 创建 左下 方圆 角 : 用 bottom-left 替换 
第 2) 步 和 第 G3) 步 中 的 top-left。 作 
为 可 选 的 一 步 ， 用 bottomleft 替换 第 
(1) 步 中 的 topleft。 


3. 创建 椭圆 形 圆 角 

输入 -moz-border-radius: x / y, HEP x Æ 
圆 角 在 水 平方 向 上 的 半径 大 小 , y 是 圆 角 在 垂直 
方向 上 的 半径 大 小 ， 均 表示 为 长 度 ( 带 单 位 ) ， 
参见 图 144.3。 这 两 个 值 之 间 应 以 一 个 斜 杠 分 隔 。 


4. 使 用 border-radius 创建 圆 形 

(1) 输入 -moz-border-radius: r, iX EA 
工 是 元 素 的 半径 大 小 〈 带 长 度 单位 ) 。 要 创建 
圆 形 ， 可 以 使 用 短 形式 的 语法 , 上 的 值 应 该 等 
于 元 素 高 度 或 宽度 的 一 半 ， 参 见 图 14.4.3。 

(2) 输入 -webkit-border-radius: r, iX 
里 的 fr 是 元 素 的 半径 大 小 ( 带 长 度 单位 ) 。 

这 条 声明 用 于 增加 对 基于 Webkit 的 旧版 本 的 

浏览 器 (如 Chrome 和 Safari ) 的 支持 。 

(3) 输入 border-radius: +， 这 里 的 是 
元 素 的 半径 大 小 〈 带 长 度 单位 ) 。 这 是 标准 
的 无 前 级 语法 。 


不 支持 border-radius 的 旧 的 浏览 器 
仅 会 以 方 角 呈 现 元 素 。 





























同 border、margin 和 padding 属性 一 
样 ，border-radius 也 有 长 乱 两 种 形式 的 语法 ， 
使 用 哪 一 种 取决 于 是 否 需 要 为 每 个 角 指定 不 同 
的 值 。 


如 果 要 为 元 素 创 建 半径 相同 的 四 个 贺 
角 ， 可 以 使 用 较为 简单 的 border-radius 简 记 
法 ， 就 像 设置 基本 的 边框 样式 属性 那样 ， 如 
图 14.4.5 所 示 。 例 如 ， 使 用 border-radius: 
12px; 会 为 元 素 创建 四 个 半径 为 12 像 素 的 国 角 。 
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div { 
[* 让 左上 角 和 右 下 角 的 圆 角 半径 为 5pX， 
一 右上 角 和 左下 角 的 圆 角 半径 为 10px */ 
border-radius: 5px 10px; 

) 

div ( 
/* 让 左上 角 的 圆 角 半 径 为 5px， 
下 右上 角 的 圆 角 半径 为 10pX， 
> ATF AA FAO, 
一 左下 角 的 圆 角 半径 为 20pX */ 
border-radius: 5px 10px 0 20px; 

) 

div ( 
/* 让 左上 角 的 圆 角 半径 为 20pX， 
一 右 上 角 的 圆 角 半径 为 0， 
一 右 下 角 的 圆 角 半径 为 0， 
一 左 下 角 的 圆 角 半径 为 0 */ 
border-radius: 20px 0 0 0; 

) 

div ( 
/* 让 左上 角 圆 角 半 径 为 30px */ 
-moz-border-radius-topleft: 30px; 
-webkit-border-top-left-radius: 30px; 
border-top-left-radius: 30px; 

) 











14.4.5 以 下 的 例子 演示 了 指定 border-radius 
值 的 一 些 方式 ， 既 有 使 用 一 对 值 的 ， 也 有 单独 指定 
四 个 圆 角 的 。 使 用 短 形式 的 语法 可 以 消除 对 更 为 复 
困 的 长 形式 语法 的 顾 虚 , 尤其 是 需要 支持 Firefox 4.0 
之 前 版 本 的 时 候 


























:时 border-radius 属性 是 不 继承 的 。 
尽管 使 用 百分数 指定 圆 角 半 径 是 允许 


的 ， 但 通常 不 推荐 这 样 做 ， 因 为 有 些 浏览 器 
根据 计算 出 来 的 元 素 大 小 对 此 进行 处 理 时 会 
表现 出 不 一 致 的 情况 。 


Æ Firefox 支持 border-radius 之 前 ， 
它 使 用 非 标准 的 长 形式 语法 ( -moz-border- 
radius-topleft, -moz-border-radius- 


topright, -moz-border-radius-bottomleft 和 


-moz-border-radius- bottomright ) 为 元 素 创 
建 单个 圆 角 指定 属性 ( 参见 图 1444) , 48A. 
Firefox 4.0 起 , 它 开始 支持 推荐 的 语法 ( border- 
top-left-radius、 border-top-right-radius、 border- 
bottom-left-radius 和 border-bottom-right- 
radius) 。 现 在 ， 所 有 新 版 本 的 浏览 器 都 支持 
无 前 级 的 border-radius 属性 。 


如 果 你 认为 编写 border-radius 的 CSS 
很 乱 且 单调 乏味 ， 也 不 要 担心 。Randy Jensen 
的 CSS3 Generator ( www.css3generator.com ) 
等 基于 Web 的 服务 可 以 简化 创建 圆 角 的 工作 ， 
省 去 大 量 的 输入 。 使 用 该 工具 ， 仅 需 输入 半 
径 大 小 ， 就 会 在 示例 元 素 上 显示 效果 ， 从 而 
可 以 立即 查看 是 否 呈 现 出 需要 的 效果 。 更 好 
的 一 点 是 ， 它 可 以 生成 全 部 的 CSS， 你 只 需 
要 将 它们 复制 到 样式 表 中 即 可 。 对 于 其 他 的 
CSS3 属性 ， 它 也 有 类 似 的 功能 。 这 样 ， 工 作 
就 简单 多 了 ! 


14.5 ”为 文本 添加 阴影 


最 早 ，text-shadow 是 CSS2 规范 的 一 部 
分 ， 接 着 在 CSS2.1 中 被 移 除 了 ， 后 来 在 CSS3 
中 又 出 现 了 。 使 用 该 元 素 ， 可 以 在 不 使 用 
图 像 表示 文本 的 情况 下 ， 为 段落 、 标 题 等 
元 素 中 的 文本 添加 动态 的 阴影 效果 ( 参见 
图 14.5.1, [El 14.5.2 和 图 14.5.3 ) o 




















«body» 

<h1>Text Shadow</h1> 

«hi class-"multiple"»Multiple Text Shadows 
o </h1> 























«/body» 
</html> 
14.5.1 演示 text-shadow 的 使 用 的 两 个 示例 
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eoo Example: Text Shadows 
D Example: Text Shadows 


Text Shadow 


Multiple Text 
Shadows 

















图 14.5.2 ”两 个 示例 在 支持 text- shadow 属性 的 浏 
览 器 中 显示 的 样子 











h1 { 

font-family: Helvetica, Arial, 
sans-serif; 

font-size: 72px; 

line-height: 1em; 

text-shadow: 2px 2px 5px #999; 


} 


.multiple { 
text-shadow: 2px 2px O rgba(255,255, 
— 255,1), 6px 6px O rgba(50,50,50,.25); 











14.5.8. ”可 以 对 单个 元 素 添加 多 个 阴影 ， 每 条 阴 
影 的 设置 之 间 用 逗号 分 隔 ， 如 应 用 到 multiple 类 
选择 器 中 的 声明 所 示 。 这 样 ， 通 过 组 合 使 用 多 个 阴 
影 ， 可 以 创建 出 独特 有 趣 的 效果 




















1. 为 元 素 的 文本 添加 阴影 

(1) TE CSS 中 ,输入 text-shadow: 。 

(2) 分 别 输入 表示 x-offset ( 水 平 偏 移 
t). y-offset (垂直 偏 移 量 ) color (颜色 ) 
和 blur radius (模糊 半径 ) 的 四 个 值 ( 带 长 
度 单 位 ， 不 用 去 号 分 隔 ) ， 例 如 2px 2px 5px 
#999 (关于 允许 输入 的 值 ， 参 见 提 示 ) 。 

Q) 输入; (分 号 )。 





2. 为 元 素 的 文本 添加 多 重 阴影 

(1) Æ CSS 中 ,输入 text-shadow:。 

(2) 分 别 输入 表示 x-offset、y-offset、 
color 和 blur radius 的 四 个 值 ( 带 长 度 单位 ， 
不 用 去 号 分 隔 ) 。 关 于 允许 输入 的 值 ， 参 见 
提示 。 

(3) 输入， GET), 

(A) 对 四 种 属性 使 用 不 同 的 值 重复 第 CD) 步 。 

OWA; (分 号 )。 











3. 将 text-shadow 改 回 默 认 值 

(1) Æ CSS 中 ,输入 text-shadow:。 
(2) 输入 none。 

(3) 输入 ; (分 号 ) 。 


Sum  text-shadow 属性 不 需要 使 用 厂商 前 级 。 
jump 尽管 text-shadow 的 语法 与 边框 和 背 
景 属性 的 语法 是 类 似 的， 但 它 不 能 像 边 框 和 
背景 那样 单独 地 指定 四 个 属性 值 。 


如 果 不 对 text-shadow 的 值 进行 设 置 ， 
它 就 会 使 用 初始 值 none。 
Etext-shadow 属性 是 继承 的 。 
text-shadow 属性 接受 四 个 值 : 带 长 度 
单位 的 x-offset、 带 长 度 单位 的 y-offset、 可 
选 的 带 长 度 单位 的 blur radius 以 及 color 值 。 
如 果 不 指定 blur radius， 将 假定 其 值 为 0。 


GEB  x-offset 和 y-offset 值 可 以 是 正 整 
数 ， 也 可 以 是 负 整 数 ， 也 就 是 说 ，1px 和 -1px 
都 是 有 效 的 。blur radius 值 必须 是 正 整 数 。 
这 三 个 值 都 可 以 为 0。 
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AD 颜色 可 以 表示 为 十 六 进 制 数 、RGB、 
RGBA 或 HSLA 值 (参见 7.4 节 的 “CSS ŽA 
色 ”) ， 它 可 以 排列 在 属性 值 的 第 一 个 或 最 后 
== AN 


l*o 


fEE 国 对 单个 元 素 应 用 多 重 背 景 可 以 产生 一 
些 高 级 效果 。 要 应 用 多 重 背 景 ， 应 使 用 去 号 将 
不 同 的 阴影 属性 分 隔 开 ， 例 如 text-shadow: 2px 
2px 0 4999, 6px 6px 0 rgba(50, 50, 50, 
25); (参见 图 14.5.3 ) 。 这 些 阴 影 将 按照 倒 
序 进行 个 加 ， 第 一 个 显示 在 最 顶层 ， 之 后 的 
每 一 个 都 位 于 前 一 个 的 下 面 。 


14.6 ”为 其 他 元 素 添加 阴影 


使 用 text-shadow 属性 可 以 为 元 素 的 文本 
添加 阴影 ， 使 用 box-shadow 属性 则 可 以 为 元 
素 本 身 添加 阴影 ， 如 图 14.6.1 和 图 14.6.2 所 
示 。 它 们 的 基础 属性 集 是 相同 的 ， 不 过 box- 
shadow 还 允许 使 用 两 个 可 选 的 属性 一 一 inset 
关键 词 属性 和 spread 属性 ( 用 于 扩张 或 收缩 
阴影 ) 。 


























«body» 

«div class-"shadow"» 
«hi»Single Shadow«/hi» 
«/div» 


«div class-"inset-shadow"» 
«hi»Inset Shadow«/h1» 
«/div» 


«div class-"multiple"» 
«hi»Multiple Shadows«/hi» 
«/div» 

</body> 








</html> 





14.6.1 这 个 文档 包含 三 个 div， 它 们 用 于 演示 
使 用 box-shadow 添加 一 个 或 多 个 阴影 的 效果 




















eoo Box Shadows 
la Box Shadows 





Single 
Shadow 





Multiple 
Shadows 








图 14.6.2 三 个 示例 在 支持 box-shadow 属性 的 浏 
览 嚣 中 显示 的 样子 

box-shadow 属性 与 text-shadow 属性 的 另 
一 个 区 别 是 ， 前 者 获得 的 文 持 更 少 ， 且 需要 
针对 某 些 浏览 器 版 本 使 用 厂商 前 级 。 

尽管 通常 只 对 box-shadow 属 性 使 用 四 
个 值 ， 实 际 上 该 属性 接受 六 个 值 : 带 长 度 单 
位 的 x-offset 和 y-offset、 可 选 的 inset X 
键 字 、 可 选 的 带 长 度 单位 的 plur-radius、 
可 选 的 带 长 度 单位 的 spread 值 及 color fii. 
如 果 不 指定 blur-radius FI spread 的 值 ， 则 
设 为 0。 

1. 为 元 素 添加 阴影 

(1) 在 CSS F, 输入 -moz-box-shadow:。 

(2) 分 别 输入 表示 x-offset, y-offset, 
blur radius 和 color 的 值 (前 三 个 值 均 带 长 
度 单位 ) ， 如 图 14.6.3 所 示 。 

(3) 输入 -webkit-box-shadow: ， 再 重复 第 
Q) 步 。 

(4) 输入 box-shadow: ， 再 重复 第 (2) 步 。 


2. 创建 内 阴影 

(1) Æ CSS 中 ,输入 -moz-box-shadow:。 
(2) 在 冒号 后 输入 inset, 再 输入 一 个 空格 。 
(3) 分 别 输入 表示 x-offset 、y-offset、 
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blur radius 和 color 的 值 (前 三 个 值 均 带 长 
度 单位 ) ， 例 如 2px 2px 5px #000, 

(4) 输入 -webkit-box-shadow: ， 再 重复 第 
Q) 步 和 第 (3) 步 。 

(5) 输入 box-shadow: ， 再 重复 第 (2) 步 和 
第 (3) 步 。 





div ( 
background: fff; 
float: left; 
height: 150px; 
margin: 10px; 
width: 150px; 


} 

.shadow { 
background: #ccc; 
-moz-box-shadow: 2px 2px 5px #000; 
-webkit-box-shadow: 2px 2px 5px #000; 
box-shadow: 2px 2px 5px #000; 

} 


.inset-shadow { 
-moz-box-shadow: inset 2px 2px 10px 
— #000; 
-webkit-box-shadow: inset 2px 2px 
— 10px #000; 
box-shadow: inset 2px 2px 10px #000; 


} 


.multiple { 
-moz-box-shadow: 2px 2px 10px 
— rgba(0,255,0,.75), 5px 5px 20px 
— rgba(125,0,0,.5); 
-webkit-box-shadow: 2px 2px 10px 
— rgba(0,255,0,.75), 5px 5px 20px 
— rgba(125,0,0,.5); 
box-shadow: 2px 2px 10px 
— rgba(0,255,0,.75), 5px 5px 20px 
— rgba(125,0,0,.5); 


} 


14.6.3 ”用 于 创建 三 个 示例 的 CSS。 注 意 ,， 要 
添加 两 个 额外 的 带 厂商 前 缀 的 属性 ， 以 保证 在 旧 的 
Firefox 和 Webkit 浏览 器 中 正确 显示 。 不 理解 box- 
shadow 的 浏览 器 会 忽略 这 些 CSS 规则 ， 页 面 将 显 
示 为 没有 阴影 的 效果 
































3. 为 元 素 应 用 多 重 阴 影 

(1) Æ CSS F, 输入 -moz-box-shadow:。 

Q) 分 别 输 入 表示 x-offset, y-offset, 
blur radius 和 color 的 值 (前 三 个 值 均 带 长 
度 单位 ) ， 例 如 2px 2px 5px #000, 

Q) WA , EF) 

(4) 对 每 种 属性 使 用 不 同 的 值 重 复 第 
(2) 步 。 

(5) 输入 -webkit-box-shadow:， 
(2) 步 至 第 (4) 步 。 

(6) 输入 box-shadow: ， 再 重复 第 (2) 步 至 
第 (4) 步 。 


4. 将 box-shadow 改 回 默认 值 

(1) TE CSS 中 ， 输 入 -moz-box-shadow: 
none。 

(2) 输入 -webkit-box-shadow: none, 

(3) 输入 box-shadow: none, 


对 于 box-shadow / 4E, Firefox 3.5 和 
3.6 需要 -moz- 厂商 前 级 ， 一 些 旧版 本 的 基于 
Webkit 的 浏览 器 ( 如 Safari fe Chrome ) 需要 
-webkit- 前 级 。Opera 10.5 和 Internet Explorer 
9 3j € 4 box-shadow 属性 ， 因 此 它们 不 需要 
厂商 前 级 。 要 查找 关于 什么 时 候 需 要 对 box- 
shadow 使 用 厂商 前 级 的 信息 ， 参 见 http:// 


CSS3please.com。 














再 重复 第 











ER 如果 不 设置 属性 值 ， 则 使 用 默认 值 
none。 

SIE box-shadow 属性 是 不 继承 的 。 

颜色 可 以 表示 为 十 六 进 制 数 、RGB、 


RGBA 或 HSLA 值 ( 参见 7.4 节 的 “CSS 颜色 ”)， 
它 可 以 排列 在 属性 值 的 第 一 个 或 最 后 一 个 。 
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X-offset 和 y-offset 值 可 以 是 正 整 数 ， 
也 可 以 是 负 整 数 ， 也 就 是 说 ，1px 和 -1px 都 
是 有 效 的 。blur radius 值 必 须 是 正 整 数 。 这 
三 个 值 都 可 以 为 0。 


EEE 国 对 单个 元 素 应 用 多 重 背 景 可 以 产生 一 
些 高 级 效果 。 要 应 用 多 重 背 景 ， 应 使 用 过 号 
将 不 同 的 阴影 属性 分 隔 开 ， 例 如 box-shadow: 
2px 2px 0 #999, 6px 6px 0 rgba(50, 50, 
50, .25); (参见 图 14.63) 。 这 些 阴影 将 按 
照 倒 序 进 行 登 如， 第 一 个 显示 在 最 顶层 ， 之 
后 的 每 一 个 都 位 于 前 一 个 的 下 面 。 


使 用 Internet Explorer 专 有 的 滤 镜 和 
-ms-filter 属性 ， 可 以 在 旧版 本 的 Internet 
Explorer 中 创建 阴影 效果 ， 不 过 ， 还 需要 使 用 
额外 的 HTML 标记 和 CSS 样式 规则 以 解决 使 
用 滤 镜 带 来 的 问题 。 


14.7 应 用 多 重 背 景 


为 单个 HTML 元 素 指定 多 个 背景 是 CSS 
中 最 令 人 期 待 的 一 个 特性 ( 如 图 14.7.1、 
图 14.7.2 和 图 14.7.3 所 示 ) 。 通 过 减少 对 某 
些 元 素 的 需求 ( 这 类 元 素 存 在 只 是 为 了 用 
CSS 添加 额外 的 图 像 背 景 ) ， 指 定 多 重 背 景 
便 可 以 简化 HTML 代码 ， 并 让 它 容易 理解 和 
维护 。 多 重 背 景 几乎 可 以 应 用 于 任何 元 素 。 





























«body» 
«div class-"night-sky"» 
«hi»In the night sky...«/hi» 











«/div» 
«/body» 
</html> 
14.7.1 ”应 用 多 重 背 景 
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In the night Sky..: 


14.7.2 ”支持 多 重 背 景 的 浏览 器 显示 示例 的 样 
子 。 其 中 ， 图 像 是 分 层次 相互 重 闭 在 一 起 的 ， 用 去 
号 分 隔 的 列表 中 的 第 一 个 图 像 位 于 顶部 。 为 单个 元 
素 应 用 多 重 背 景 是 很 容易 的 ， 不 过 ， 为 了 确保 内 容 
是 可 访问 的 ， 需 要 在 CSS 中 使 用 background-color 
提供 一 个 简单 的 后 备 样 式 
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In the night sky... 


14.7.3 这 是 在 不 支持 多 重 背景 图 像 语法 的 浏览 
器 中 显示 的 样子 。 如 果 坚 持 渐 进 增强 的 原则 ， 就 应 
该 在 background-image 规则 之 前 包含 background- 
color 或 仅 包含 一 个 background-image 属性 ， 以 照 
ERREZI PEIS EP D E 
































为 单个 元 素 应 用 多 重 背景 图 像 

(1) 输入 background-color: b, ix Hif 
b jii EB TOR EF SUR ELE, (参见 
图 14.7.4 ) 。 
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(2) 输入 background-image: u, XHY u 
是 绝对 或 相对 路 径 图 像 引 用 的 列表 ( 用 逗号 
分 隔 ) 。 

(3) 输入 background-position: p， 这 里 
HJ p 是 成 对 的 x-offset 和 y-offset ( 可 以 是 
正 的 ， 也 可 以 是 负 的 ; 带 长 度 单位 ) 的 集合 
( 用 逗号 分 隔 ) 。 每 个 背景 图 像 都 应 有 一 组 
x-offset 和 y-offset, 

(4) 输入 background-repeat: rz， 这 里 的 
r Æ repeat-x, repeat-y zk no-repeat 值 ( 参 
见 10.9 5) 的 列表 ( 用 逗号 分 隔 )， 每 个 图 
像 对 应 一 个 值 。 




















.night-sky { 
background-color: #333; 
background-image: url(ufo.png), 

— url(stars.png), url(stars.png), 

— url(sky.png); 

background-position: 50% 102%, 100% 

— -150px, O -150px, 50% 100%; 

background-repeat: no-repeat, 

— no-repeat, no-repeat, repeat-x; 

height: 300px; 

margin: 0 auto; 

padding-top: 36px; 

width: 75%; 
} 


E 14.7.4 要 使 用 多 重 背 景 ， 需 要 使 用 四 个 单独 的 
长 格式 背景 属性 : background-color, background- 
image、background-position 和 background- 
repeat。 使 用 其 中 任何 一 个 属性 ， 都 可 以 调整 图 像 
的 定位 和 重复 方式 


















































GEB 指定 多 重 背景 不 需要 使 用 厂商 前 缓 。 
对 于 多 重 背 景 图 像 ， 可 以 使 用 标准 的 


55A 语法 ， 即 使 用 和 过 号 分 隔 每 组 背景 参数 。 
例如 ， 使 用 background: 
no-repeat, url(image2.jpg) 10096 1096 no- 
repeat; 可 以 实现 与 重复 更 多 的 长 形式 语法 相 
同 的 效果 。 


url(image.jpg) 0 0 


背景 图 像 是 分 层次 相互 二 加 在 一 起 的 ， 
第 一 个 图 像 位 于 顶部 , 最 后 一 个 图 像 位 于 底部 。 


NCDRGU SUR EUR UN 览 器 ， 
如 果 指 定 了 background-color 值 ， 它 就 会 作 


为 浏览 器 所 用 的 全 部 图 像 后 面 的 最 终 背 景 层 。 
CES 不 支持 多 重 背景 图 像 的 浏览 器 会 忽略 
background-image 属性 ， 并 试 着 使 用 后 备 的 
background-color 值 。 


14.8 使 用 渐变 背景 


渐变 背景 也 是 CSS3 中 的 新 特性 ， 通 过 
它 可 以 在 不 使 用 图 像 的 情况 下 创建 从 一 种 颜 
色 到 另 一 种 颜色 的 过 渡 (参见 图 14.8.1 和 











图 14.8.2 ) 。 尽 管 相关 的 规范 仍 在 变动 ， 但 随 
着 规范 不 断 接近 于 最 终 的 版 本 ,浏览 响 的 文 
持 程 度 也 在 不 断 地 提升 。 

<body> 


«div class="horizontal"></div> 
«div class="vertical"></div> 
«div class="diagonal"></div> 
«div class="radial"></div> 
«div class-"multi-stop"»«/div» 
«/body» 























图 14.8.4. 仅 使 用 CSS 实现 渐变 的 五 种 方式 


尽管 背景 渐变 语法 需要 使 用 ) 商 前 级 以 最 
大 程度 地 支持 各 类 浏览 器 ,但 为 了 降低 学 习 难 度 ， 
一 开始 我 们 将 仅 演示 无 前 级 的 属性 。 本 节 的 提示 
提供 了 一 些 额 外 的 信息 ， 完 整 的 示例 ( 包括 带 厂 
商 前 缀 的 属性 ) 可 以 在 本 章 的 代码 下 载 中 找到 。 
根据 渐进 增强 的 原则 ， 最 好 为 不 支持 背 
景 渐变 属性 的 浏览 器 提供 一 个 后 备 选项 。 这 
个 后 备 可 以 是 一 个 简单 的 背景 颜色 或 背景 图 像 。 
在 CSS 中 ， 它 可 以 位 于 背景 渐变 规则 的 前 面 。 
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图 14.8.2 ”支持 渐变 背景 的 浏览 器 显示 五 个 示例 
的 样子 ( 假定 已 在 示例 代码 中 添加 了 适当 的 厂商 前 
级 ) 。 对 于 背景 渐变 ， 当 前 的 浏览 器 均 需 要 使 用 厂 
商 前 级 。 如 果 指 定 了 background 属性 ， 不 理解 渐 
变 语 法 的 浏览 器 将 使 用 该 属性 的 值 ( 男 见 彩 插 ) 


使 用 Css 创建 渐变 ( 包括 线性 渐变 和 径 
向 渐变 ) 有 两 种 主要 的 方式 ， 每 种 方式 都 有 
不 同 的 必 选 参数 和 可 选 参数 ， 如 图 14.8.3 和 
图 14.8.4 所 示 。 














div { 
float: left; 
height: 150px; 
margin: 10px; 
width: 150px; 
} 


.horizontal { 
background: #cedce7; 
background: linear-gradient(left, 
— #cedce7,#596a72); 

} 


14.8.3 简单 的 双色 水 平 渐变 ， 使 用 了 标准 的 线 
性 渐变 语法 ， 同 时 针对 不 支持 CSS 渐变 的 浏览 
准备 了 一 种 简单 的 后 备 颜色 














CD deg 为 degree (JE ) 一 词 的 缩写 。 一 一 译 者 注 








.Vertical { 
background: #cedce7; 
background: linear-gradient(top, 
— #cedce7,#596a72); 

} 


14.8.4 ”创建 垂直 渐变 仅 需 修 改 第 一 个 属性 ， 使 
之 包含 top 或 bottom 



































1. 创建 后 备 背景 颜色 

输入 background-color: color, 
color 可 以 是 任何 支持 的 颜色 名 称 、 
数 以 及 RGB RGBA 3X HSL fü. 


这 里 的 
十 六 进 制 


2. 定位 渐变 类 型 

输入 background: type(， 这 里 的 type 可 
以 是 linear-gradient (线性 渐变 ) 或 Tadial- 
gradient《〈 径 向 渐变 ) 。 


3. 定义 渐变 开始 位 置 

输入 left H, 逗号 ) 以 创建 从 元 素 左 
侧 开 始 的 渐变 ; 

或 者 输入 right M, 逗号 ) 以 创建 从 元 
素 右 侧 开始 的 渐变 ; 

或 者 输入 top H, 逗号 ) 以 创建 从 元 素 
顶端 开始 的 渐变 ; 

或 者 输入 bottom 和 , (逗号) 以 创建 从 
元 素 底 端 开始 的 渐变 ; 

或 者 输入 angle (角度 ) 值 ( 如 0deg、 
45deg zÈ 120deg ^) 和 ，( 逗号 ) 以 改变 渐 
变 的 角度 。 这 里 的 角度 为 渐变 线 沿 逆 时 针 
方向 转 至 水 平 线 所 转 过 的 角度 ， 如 图 14.8.5 
所 示 ; 

或 者 输入 center ( 仅 适 用 于 径 向 渐变 ) 
Tl, CES ) 以 创建 从 元 素 中 心 开 始 的 渐变 ， 
如 图 14.8.6 所 示 。 
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.diagonal { 
background: #cedce7; 
background: linear-gradient(45deg, 
> #cedce7, 11596272); 

} 











14.8.5 ”要 创建 带 角 度 的 渐变 ， 仅 需 修 改 第 一 个 
属性 的 值 ， 这 个 值 用 于 指定 渐变 的 发 出 角度 值 。 这 
里 的 角度 为 渐变 线 沿 逆 时 针 方 向 转 至 水 平 线 所 转 过 
的 角度 ， 例 如 ， 使 用 odeg 会 创建 一 个 从 左 至 右 的 
水 平 渐变 ， 使 用 90deg 则 会 创建 一 个 由 下 至 上 的 垂 
直 渐 变 



















































































.radial ( 
background: #cedce7; 
background: radial-gradient(center, 
— #cedce7,#596a72); 


} 








14.8.6” 径 向 渐变 包含 两 个 额外 的 可 选 参 数 ， 不 
过 这 个 最 简单 的 示例 则 使 用 了 与 线性 渐变 相同 的 参 
数 。 在 这 个 例子 中 ， 通 过 指定 center 关键 字 ， 浙 
变 从 元 素 的 中 心 发 出 














4. 指定 开始 颜色 和 结束 颜色 

输入 cz，c2)， 其 中 cz fI c2 4 3l Zi Yr 
变 的 开始 颜色 和 结束 颜色 。 使 用 颜色 名 称 、 
十 六 进 制 数 以 及 RGB 、RGBA 或 HSL 值 指定 
颜色 。 


5. 创建 包含 多 个 颜色 的 渐变 

(1) 重复 创建 线性 渐变 或 径 向 渐变 的 头 两 
项 技术 ， 即 指定 渐变 的 类 型 和 开始 位 置 ( 参 
见 图 14.8.2, BI 14.8.3 和 图 14.8.4) 。 

(2) 然后 输入 cz pi, c2 p2, c3 p3), 
其 中 以 表 示 颜 色 (使 用 颜色 名 称 、 十 六 
进 制 数 以 及 RGB、RGBA 或 HSL 值 进行 
指定 ) , p# 是 对 应 颜色 的 位 置 (使 用 0 到 
100% 之 间 的 百分数 进行 指定 ) ， 如 图 14.8.7 
所 示 。 











.multi-stop { 
background: url(multi-stop-gradient.jpg) 
— 0 0 repeat-x; 
background: linear-gradient(top, #ff0000 
— 0%, #00ff00 50%, #0000ff 100%); 











14.8.7 ZHE (使 用 两 种 以 上 颜色 的 渐变 ) 
遵循 相同 的 模式 ,不 过 还 需要 指定 color-stop 位 置 。 
该 位 置 使 用 0 到 100% 之 间 的 百分数 表示 


基于 Webkit 的 浏览 器 ( 如 Safari 4) 

的 早期 版 本 使 用 非 标准 的 语法 指定 渐变 背景 。 
Safari 5 和 Chrome 的 新 版 本 均 支 持 与 Firefox 
相同 的 语法 ， 但 当前 仍 需 使 用 -webkit- 和 


-moz- 厂商 前 级 。 








SE 关于 使 用 渐变 属性 的 最 新 细节 信息 ， 
参见 Mozilla 和 Webkit 团队 提供 的 介绍 ( 分 别 
位 于 https:/developermozilla.org/en/CSS/-moz- 
radial-gradient 和 http://://webkit.org/blog/1424/ 
css3-gradients/ ) o 


D 妥 创 建 多 色 渐变 ， 可 以 在 渐变 语法 中 
指定 两 个 以 上 的 颜色 ， 并 使 用 一 个 额外 的 可 
选 参数 ( color-stop ) ， 如 图 14.8.7 所 示 。 


可 以 使 用 颜色 名 称 、 十 六 进 制 数 以 及 
RGB, RGBA 或 HSLA 值 指定 颜色 。 


CES 尽管 最 新 版 本 的 Web 浏览 器 对 渐变 语 
法 的 支持 程度 始终 在 提升 ， 但 渐变 语法 仍 在 
变化 之 中 ， 需 要 使 用 厂商 前 缀 ， 包 括 Internet 
Explorer 和 Opera 的 厂商 前 缓 。 


CES 可 用 使 用 ColorZilla 提供 的 Gradient 
Generator ( http://colorzilla.com/gradient- 
editor/) , Microsoft 的 CSS Gradient Background 
Maker ( http://ie.microsoft.com/testdrive/graphics/ 
cssgradientbackgroundmaker/ ) 等 可 视 化 的 工具 
来 完成 创建 CSS 渐变 代码 的 繁琐 工作 。 这 些 
工具 还 可 以 自动 生成 所 有 带 厂 商 前 缓 的 属性 ， 
从 而 确保 最 大 程度 地 兼容 旧 的 浏览 器 版 本 。 
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Internet Explorer 10 包含 对 CSS 渐变 
的 原生 支持 。IE10 之 前 的 版 本 则 可 以 使 用 专 有 
的 filter:progid:DXImageTransform.Microsoft 
gradient 滤 镜 创建 渐变 ， 或 者 使 用 额外 的 
HTML 标记 和 SVG( 针对 Internet Explorer 9 ) 。 
像 上 一 条 提示 中 提 到 的 ColorZilla Gradient 
Editor 这 样 的 工具 可 以 生成 所 有 使 用 滤 镜 所 需 
的 代码 ， 因 此 你 不 必 担 心 需要 自己 编写 这 些 
代码 。 


可 以 通过 指定 background-color 或 
background-image 为 不 支持 渐变 的 浏览 器 提供 
后 备 方 案 ， 不 过 要 记 住 的 是 ， 无 论 浏 览 器 是 
否 使 用 CSS 中 的 图 像 ,这些 图 像 都 会 被 下 载 。 


EED 此 外 ，Firefox 和 Webkit 还 支持 带 前 
级 的 repeating-linear-gradient ( 重复 线性 
渐变 ) 和 repeating-radial-gradient ( 重复 
径 向 渐变 ) 。 


14.9 为 元 素 设置 不 透明 度 
使 用 opacity 属性 可 以 修改 元 素 (包括 图 
像 ) 的 透明 度 ， 如 图 14.9.1 和 图 14.9.2 所 示 。 


修改 元 素 不 透明 度 的 方法 : 
fA opacity: o, XE HJ o 表示 元 素 的 
不 透明 程度 ( 两 位 小 数 ， 不 带 单位 ) 。 





«body» 
«div class-"box"» 

«img src-"sleeves.jpg" width-"420" 
height-"296" alt-"Record Sleeves" /» 
«/div» 

«/body» 
</html> 
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图 14.9.2 这 是 示例 在 div 元 素 的 opacity 设 为 默 
认 值 1 时 的 样子 ( 男 见 彩 插 ) 





opacity 的 默认 值 为 1。 该 属性 值 可 
以 使 用 0.00 (完全 透明 ) 至 1.00 (完全 不 条 
明 ) 之 间 的 两 位 小 数 ， 如 图 14.9.3 和 图 14.9.4 
所 示 。 


通过 使 用 opacity 属性 和 :hover 伪 属 
性 ， 可 以 产生 一 些 有 趣 且 实用 的 效果 。 例如 ， 
可 以 修改 元 素 在 用 户 鼠 标 停 留 时 的 不 透明 度 ， 
或 者 为 某 些 元 素 ( 如 可 选 的 表单 字段 ) 添加 
表示 禁用 的 外 观 。 





img ( 
vertical-align: top; 


.box { 
background: $000; 
opacity: .5; 


padding: 20px; 











149.3 将 opacity 设 为 小 于 1 的 值 可 以 让 元 素 
及 其 子 元 素 变 成 半 透 明 的 样子 。 在 这 个 例子 中 ,不 





14.9.1 这 个 文档 包含 一 个 div， 其 中 有 一 个 图 像 


透明 度 被 设 为 50% 或 0.5， 小 数 点 前 的 0 是 可 选 的 
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14.9.4 这 是 示例 在 div 元 素 的 opacity 设 为 
0.5 ( 即 不 透明 度 为 50% ) 时 的 样子 。 可 以 看 到 ， 
div 元 素 的 黑色 背景 现在 显示 为 灰色 ， 图 像 也 显示 
为 半 透 明 的 效果 ( 男 见 彩 插 ) 


就 像 在 RGBA 和 HSLA 颜色 中 设置 
opacity 值 一 样 ， 设 置 opacity 属性 值 时 不 需 
要 在 小 数 点 前 加 上 0。 


无 论 显示 成 什么 样子 ，opacity 属 
性 并 不 是 继承 的 。opacity 的 值 小 于 1 的 元 
素 的 子 元 素 也 会 受到 影响 ， 但 这 些 子 元 素 的 
opacity 值 仍 为 1. 


Internet Explorer 9 之 前 的 版 本 并 不 原 
生 支 持 opacity 属性 ， 但 对 于 它们 ， 可 以 使 用 
专 有 的 -ms-filter:progid:DXImageTransform. 
Microsoft.Alpha(opacity-50); 和 filter:alpha 
(opacity=50); 属性 ， 并 为 元 素 设 置 zoom: 1; 
以 触发 hasLayout， 如 图 14.9.5 所 示 。 关 于 
这 些 滤 镜 ， 可 以 在 CSS Tricks 网 站 上 找到 更 
多 信息 (http://css-tricks.com/css-transparency- 
settings-for-all-broswers/ ) 。 关 于 hasLayout 的 出 
处 和 作用 ， 参 见 http://haslayout.net/haslayout。 





div { 
/* 将 元 素 的 不 透明 度 设 为 50%， 为 Internet Expl- 
— orer 9 之 前 的 版 本 提供 可 选 的 专 有 滤 镜 声 
一 明 ， 并 使 用 zoom: 1 声明 为 这 些 IE 的 旧版 本 触 
一 发 hasLayout */ 
-ms-filter: progid:DXImageTransform. 
— Microsoft.Alpha(opacity-50); 
filter: alpha(opacity-50); 











opacity: .5; 
Zoom: 1; 
j 
图 14.9.5. 这 个 简单 的 示例 演示 了 如 何 为 并 不 原生 


支持 opacity 的 Internet Explorer 9 之 前 的 版 本 应 用 
其 专 有 滤 镜 。-ms- 人 1ter: 声明 是 针对 IE8 的 ， 而 更 
为 简单 的 们 ter: 则 支持 IES 至 IET 
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本 章 内 容 

口 创建 有 序列 表 和 无 序列 表 

口 选择 标识 

口 选择 列表 的 起 始 编号 

口 使 用 定制 的 标识 

口 控制 标识 的 位 置 

口 同时 设置 所 有 的 列表 样式 属性 
口 设置 府 套 列表 的 样式 

口 创建 描述 列表 





HTML 包含 专门 用 于 创建 项 目 列 表 的 元 
素 。 你 可 以 创建 普通 列表 、 编 号 列表 、 符 号 
列表 以 及 描述 列表 ， 可 以 在 一 个 列表 中 肯 套 
另外 一 个 或 多 个 列表 。 

所 有 的 列表 都 是 由 主要 元 素 和 次 要 元 素 构 
成 的 。 主要 元 素 用 于 指定 要 创建 的 列表 的 类 型 ， 
其 中 ,ul 表示 无 序列 表 (unordered list) , ol 
表示 有 序列 表 (ordered list) , dl 表示 描述 列 
表 ( description list; 在 HTML5 之 前 称 为 定义 
列表 ) 。 次 要 元 素 用 于 指定 要 创建 的 列表 项 目 
类 型 ， 其 中 ，1i 代表 ol ul 中 的 列表 项 目 ， 
dt 和 dd 分别 代表 dl 中 的 术语 和 描述 。 

在 这 些 类 型 里 面 ， 无 序列 表 是 万 维 网 上 
最 为 常见 的 列表 类 型 ， 它 也 是 对 大 多 数 类 型 
的 导航 进行 标记 的 事实 标准 (本 书 有 几 个 这 
样 的 例子 ) 。 不 过 ， 上 述 三 种 类 型 都 各 有 用 
武之 地 ， 本 章 将 对 此 进行 讲解 。 

















15.1 创建 有 序列 表 和 无 序列 表 


有 序列 表 适 于 提供 完成 某 一 任务 的 分 步 
说 明 ( 如 图 15.1.1 和 图 15.1.2 所 示 ) ,或 用 
于 创建 大 型 文档 的 大 纲 ( 如 果 愿 意 ， 可 以 加 
上 指向 对 应 部 分 的 链接 ) 。 它 还 适合 对 面包 
届 导 航 进行 标记 (参见 提示 ) 。 总 之 ， 它 适 
用 于 任何 强调 顺序 的 项 目 列表 。 

无 序列 表 可 能 是 万 维 网 上 使 用 范围 最 
广 的 列表 ， 因 为 它们 常用 于 标记 导航 ( 如 
图 15.1.3 和 图 15.1.4 所 示 ) o 


创建 列表 

(1) 输入 <ol>( 有 序列 表 ) 或 <ul> (无 
序列 表 ) 。 对 于 有 序列 表 ， 可 以 包含 start, 
type 和 reversed 这 三 个 可 选 的 属性 。 (OT 
start, 参见 15.3 节 ; XT type, 参见 15.2 15; 
关于 reversed， 参 见 最 后 一 条 提示 。reversed 
还 没有 浏览 器 支持 ， 因 此 无 法 看 到 效果 。) 

(2) 输入 «li» (这 是 list 一 词 的 前 两 个 字 
母 ) 以 开始 第 一 个 列表 项 目 。 对 于 有 序列 表 ， 
可 以 包含 可 选 的 value 属性 ( 更 多 细节 参见 
15:39 25 

(3) 添加 要 包含 在 列表 项 目 内 的 内 容 (如 
文本 、 链 接 img 元 素 等 ) 。 

(4) 输入 </li> 以 结束 列表 项 目 。 

(5) 对 于 每 个 新 的 列表 项 目 ， 重 复 第 2) 
步 至 第 (4) 步 。 
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(6) 输入 «/ol» 或 </ul> (与 第 (1) 步 中 的 
开始 标记 对 应 ) 以 结束 列表 。 





<body> 

«hi»Changing a light bulb«/hi» 

«ol» 
«li»Make sure you have unplugged the 
lamp from the wall socket.«/li» 
«li»Unscrew the old bulb.«/li» 
«li»Get the new bulb out of the 
> package.«/li» 
«li»Check the wattage to make sure 
it's correct.«/li» 
«li»Screw in the new bulb.«/li» 
«li»Plug in the lamp and turn it 














> on!«/li» 
«/ol» 
«/body» 
</html> 
15.4.1. 目前 还 没有 对 列表 标题 进行 格式 化 的 正 














式 方 法 。 大 多 数 情况 下 ， 使 用 常规 的 标题 〈 参 见 第 
3 章 ) 或 段落 (参见 第 4 章 ) 即 可 ， 就 像 下 面 的 例 
子 那样 。 按 照 惯例 ( 并 非 必 须 ) ， 可 以 对 列表 项 目 
进行 缩 进 ， 表 明 它们 是 向 套 在 ol 里 面 的 (对 于 凯 也 
是 这 样 的 ) 。 不 过 , 这 些 缩 进 在 页 面 中 不 会 显示 出 来 ， 
页 面 中 的 显示 是 由 应 用 到 列表 上 的 CSS 控制 的 


An ordered list - Mozilla Firefos FEJ 口 xÍ 


File Edit view History Bookmarks Tools Help 
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| | An ordered list 





Changing a light bulb 


1. Make sure you have unplugged the lamp 
from the wall socket. 

. Unscrew the old bulb. 

. Get the new bulb out of the package. 

. Check the wattage to make sure it's correct. 

. Screw in the new bulb. 

. Plug in the lamp and turn it on! 


€ Un 上 PO 








15.1.2 ”这 个 列表 使 用 默认 的 阿拉 伯 数 字 创 建 带 
编号 的 有 序列 表 。 可 以 使 用 CSS 对 此 进行 修改 。 
有 序列 表 和 无 序列 表 在 显示 时 默认 都 会 进行 缩 进 ， 
无 论 它们 在 HTML 中 是 否 有 缩 进 (参见 图 15.1.1) 














«body» 

«hi»PageWhacker, version 12.0: Features«/hi» 

«ul» 
«li»New or improved features marked 
>with a solid bullet.«/li» 
«li»One-click page layout«/li» 
«li»Spell checker for 327 major 
> languages«/li» 
«li»Image retouching plug-in«/li» 
«li»Special HTML filters«/li» 
«li»Unlimited Undo's and Redo's«/li» 
«li»Automatic book writing«/li» 

«/ul» 

«/body» 

</html> 














15.1.3 ”无 序列 表 中 的 项 目 与 有 序列 表 中 的 是 相 
Ei, RA ul 元 素 是 不 同 的 
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PageWhacker, version 12.0: 
Features 


* One-click page layout 

e Spell checker for 327 major languages 
* Image retouching plug-in 

e Unlimited Undo's and Redo's 

® Automatic book writing 





15.1.4. 在 默认 情况 下 ， 无 序列 表 前 面 显 示 实 心 
的 圆 点 。 可 以 通过 CSS 对 此 进行 修改 





CED TARER CRGO EAR HRR 
样式 决定 要 使 用 的 列表 类 型 ， 毕 竟 ， 这 些 标识 
的 样式 随时 都 可 以 通过 CSS 进行 修改 〈 甚至 
可 以 在 有 序列 表 上 显示 符号 ) 。 相 反 ， 应 该 考 
虑 列表 的 含义 一 -列表 会 随 着 其 中 项 目 顺序 的 
改变 而 改变 吗 ? 如 果 答 案 是 肯定 的 ， 就 使 用 有 
序列 表 进 行 标记 。 否 则 ， 就 使 用 无 序列 表 。 
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ED 使 用 列表 标记 链接 组 时 ， 大 多 数 情况 
下 均 可 以 使 用 无 序列 表 ， 如 主导 航 链接 、 指 
向 一 组 视频 或 相关 报道 的 链接 、 页 脚 中 的 一 
组 链接 等 。 对 于 面包 悄 导 航 则 应 使 用 有 序列 
表 ， 因 为 这 些 链接 有 特定 的 次 序 ( 换 句 话说 ， 
顺序 是 有 意义 的 ) 。 面 包 悄 导航 通常 水 平地 
显示 在 主要 内 容 区 域 的 上 方 ， 指 示 当 前 页 面 
在 站 点 导航 路 径 中 的 位 置 。 例如， 在 提供 菜 
款 移动 电话 详细 信息 的 页 面 ， 面 包 悄 呈现 为 
Home — Products — Phones — The Fone 3.0。 列 
表 中 的 每 个 项 目 均 为 链接 (最 后 一 个 项 目 除 
外 ,因为 访问 者 正 位 于 The Fone 3.0 的 页 面 ) 。 
图 15.7.5 包含 了 这 个 例子 ( 6,75 HAUS T 
顶部 主导 航 和 产品 名 称 的 大 标题 之 间 ) 。 


第 11 章 的 完整 示例 网 页 演示 了 各 种 
不 同 的 使 用 和 呈现 列表 的 方式 。 其 中 有 用 于 
导航 的 无 序列 表 (水 平 排列 ， 有 符号 ) 、 用 
于 一 系列 图 像 的 无 序列 表 ( 水 平 排列 ,无 标识 ) 
以 及 用 于 一 系列 按时 间 排 序 的 月 度 存 档 链 接 
的 有 序列 表 ( 有 符号 ) 。 第 3 章 也 有 在 导航 
中 使 用 ul 的 例子 。 


除非 使 用 CSS 另行 指定 ， 有 序列 表 中 
的 项 目 使 用 阿拉 伯 数 字 (1、2、3 等 ) 进行 编 
号 (参见 图 15.1.1 ) 。 


ED 时 认 情 况 下 ， 无 序列 表 的 项 目前 面 显 
示 实 心 的 圆 点 ( 参见 图 15.1.2 ) 。 你 可 以 选择 
不 同 的 符号 (参见 15.2 节 ) ， 甚 至 可 以 创建 
你 自己 的 符号 (参见 15.4 节 )。 


只 能 将 列表 内 容 放 在 1i 元 素 里 。 例 如 ， 
将 内 容 放置 在 ol 或 岂 开 始 标记 和 第 一 个 1 
元 素 之 间 是 不 允许 的 。 


AD 可 以 在 li 元 素 中 嵌 套 各 种 类 型 的 
HTML 元 素 ， 如 任何 短语 内 容 元 素 (如 em、 
a, cite 等 ) 。 在 列表 项 目 中 谈 套 段落 和 div 
也 是 有 效 的 ， 但 很 少 需要 这 样 做 。 

可 以 在 一 个 列表 中 创建 另 一 个 列表 CR 
RAFA, nesting list) ， 甚 至 可 以 混合 使 用 有 
序列 表 和 无 序列 表 。 不 过 ， 要 确保 用 到 所 有 需要 
的 开始 标记 和 结束 标记 ， 对 每 个 列表 进行 正确 地 
谱 套 。 谈 套 有 序列 表 和 无 序列 表 的 例子 见 15.7 节 。 


CED SUAHOUT. IRA Zi EQUI 
距 ， 从 而 形成 缩 进 。 可 以 使 用 CSS 取消 (或 
增 大 ) 缩 进 。 根 据 减少 左 侧 外 边 距 的 量 ， 符 
号 可 能 处 于 内 容 的 外 边 或 者 消失 在 窗口 的 左 
边缘 之 外 (第 11 章 中 有 这 样 的 例子 ) 。 


全 ”如 果 将 内 容 方向 指定 为 从 右 向 左 ( 例 
如 在 语言 为 希 伯 来 语 的 情况 下 ) ， 列 表 就 会 
通过 右 侧 外 边 距 进行 缩 进 。 要 指定 内 容 方向 ， 

可 以 对 页 面 的 html] 元素 中 设置 dir 属性 ， 如 
«html dir="rtl" lang="he">。 在 这 个 例子 
P, lang 被 设 为 表示 希 伯 来 语 的 he。 还 可 以 
在 body 里 面 的 元 素 上 设置 dir fe lang VŽ 
html 元 素 上 的 设置 。dir 属性 的 默认 值 为 1tr。 


截至 本 书写 作 之 际 ， 还 没有 浏览 器 
支持 布尔 型 的 reversed 属性 。 该 属性 的 作 
用 是 指示 降序 排列 的 有 序列 表 (使 用 <ol 
reversed» 或 <01 reversed-"reversed"- 


均 可 指定 该 属性 ) 。 


15.2 ”选择 标识 


创建 列表 时 ， 无 论 是 有 序列 表 ( 如 
图 15.2.1 所 示 ) 还 是 无 序列 表 ， 都 可 以 选择 
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出 现在 列表 项 目 左 侧 的 标识 的 类 型 ( 如 符号 、 
编号 、 图 像 等 ) 。 





«body» 

«hi»The Great American Novel«/h1» 

«ol» 
«li»Introduction«/li» 
«li»Development«/li» 
«li»Climax«/li» 
«li»Denouement«/li» 
«li»Epilogue«/li» 

«/ol» 

«/body» 

</html> 




















15.2.4. 这 是 用 做 示例 的 有 序列 表 。 我 们 将 对 其 


应 用 大 写 罗 马 数字 ( upper-roman ) 











1. 选择 标识 

在 样式 表 中 , 输入 list-style-type: marker, 
这 里 的 marker 是 以 下 属性 值 中 的 一 种 。 
O disc (pir, e) 
a circle ( H, O) 
O square ( JIk, W) 
O decimal ( 数字 ，1 
口 upper-alpha (大 写字 母 ,， A, B, Ce ) 
O lower-alpha (小 写字 母 ，a、b、c……… ) 
CEU. 1. I, 








O upper-roman 


Il, Veee ) ， 如 图 15.2.2 和 图 15.2.3 
所 示 

O lower-roman (小写 罗马 数字 , d. di. 
ii, jveee ) 





li { 


list-style-type: upper-roman; 


} 


15.2.2 ”可 以 对 任何 列表 项 目 应 用 list-style- 
type 属性 。 如 果 这 个 页 面 上 有 两 个 列表 ， 其 中 一 
个 是 无 序列 表 ， 那 么 可 以 将 这 个 例子 中 的 选择 器 改 
Jy ol 1i， 从 而 仅 对 有 序列 表 应 用 大 写 罗 马 数字 
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The Great American Novel 


L Introduction 
IL Development 
II Climax 
IV. Denouement 
V. Epilogue 





15.2.3 ”现在 ， 有 序列 表 采 用 大 写 罗 马 数字 进行 
编号 。 注 意 ， 大 多 数 浏览 器 会 让 编号 右 对 齐 〈 不 过 
列表 项 目的 内 容 是 左 对 齐 的 ， 如 图 所 示 ) 








2. 显示 无 标识 列表 
在 样式 表 规则 中 ,输入 list-style-type: 


none, 


默认 情况 下 ， 对 于 无 序列 表 ， 第 一 级 
列表 使 用 圆 点 ,第 一 级 说 套 列表 ( 第 二 级 列表 ) 


使 用 圆圈 ,第 第 三 级 及 后 卖 各 级 列表 使 用 方块 。 
参见 15.7 $o 


在 不 同 的 浏览 器 中 ， 圆 点 、 
X8 EA 和 外 观 可 能 稍 有 差异 。 


圆圈 和 方 


可 以 通过 list-style-type 对 ol 和 ul 
设置 任何 标识 样式 。 换 向 话 说 ， 可 以 对 01 使 
用 方块 标识 ， 也 可 以 对 岂 使 用 数字 标识 。 


也 可 以 在 HTML 中 通过 type 属性 为 有 
序列 表 指 定 标 识 类 型 ， 尽 管 推荐 的 做 法 是 尽 可 
能 在 CSS betae ap type 属性 可 
接受 的 值 包括 A、a、I、1 和 1， 它 们 用 T 
要 使 用 的 编号 类 型 (默认 值 为 1 ) 。 例 如 ， 
type="I"> 表示 使 用 大 写 罗 马 数字 作为 A 
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15.3 选择 列表 的 起 始 编号 


你 可 能 希望 列表 的 编号 从 默认 值 1 以 外 
的 某 个 数字 开始 , 如 图 15.3.1 和 图 15.3.2 所 示 。 





«body» 
«hi»Changing a light bulb (with a few steps 
— missing)«/h1» 
«ol start="2"> 
«li»Unscrew the old bulb.«/li» 
<li value-"5"5Screw in the new bulb. 
o «li» 
«li»Plug in the lamp and turn it on! 
«li» 
</ol> 
</body> 








</html> 





15.3.1 在 这 个 例子 中 ， 我 略 去 了 列表 中 的 一 些 
步骤 ,不 过 仍 希 望 余下 的 步 又 保持 原 有 的 编号 ,因此 ， 
整个 列表 从 2 开始 编号 (使 用 start="2" ) ， 并 将 第 
二 个 项 目的 值 设 为 5 (使 用 value="5" ) 。 这 两 个 属 
性 都 是 可 选 的 ， 也 不 一 定 要 像 这 样 同 时 使 用 
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Changing a light bulb 
(with a few steps missing) 





2. Unscrew the old bulb. 
5. Screw in the new bulb. 
6. Plug in the lamp and turn it on! 





15.3.2 ”注意 ,不 仅 第 一 个 和 第 二 个 项 目 是 按 我 
们 指定 的 规则 进行 编号 的 ， 连 第 三 个 项 目 (Plug in 
the lamp and turn it on! ) 也 受到 了 影响 











1. 设置 整个 列表 编号 方案 的 初始 值 
TE ol 开始 标记 中 输入 start-"m", 3x Hi 
的 n 表示 列表 的 初始 值 。 


2. 修改 有 序列 表 中 某 列 表 项 目的 编号 

fr H ts lim H Nfi A value-"m", 3x 
里 的 代表 该 列表 项 目的 值 。value 应 该 总 
是 使 用 数字 表示 ， 浏 览 器 会 自动 将 它 转 换 
为 CSS xk type 属性 中 指定 的 标识 类 型 ( 参 
见 15.2 节 )。 











开罗” 设置 start 值 的 时 候 ， 应 当 始 终 使 用 
数字 。 即 便 决定 使 用 字母 或 罗马 数字 对 列表 
进行 编号 (参见 15.2 4) ， 也 应 使 用 数字 。 
浏览 器 会 显示 预期 的 标识 。 


iz 


:二 了 value 属性 的 值 会 覆盖 start 属性 的 值 。 
使 用 value 属性 对 某 列 表 项 目的 编号 


进行 修改 后 ， 后 续 的 列表 项 目 也 会 相应 地 重 
新 编号 。 

D 如 果 需 要 在 有 序列 表 中 指定 两 个 或 两 
个 以 上 位 置 相同 的 项 目 ， 使 用 value 是 非常 方 
便 的 。 以 表示 公路 赛 前 五 名 选手 的 列表 为 例 ， 
通常 该 列表 会 显示 为 1、2、3、4、5， 但 如 果 
有 并 列 第 2 名 ， 则 可 以 将 第 三 个 项 目 写 成 <1i 
value="2">， 这 时 ， 列表 将 显示 为 1、2、2、 
3< a 


列表 可 以 包含 一 个 以 上 的 带 value 属 
性 的 li, 


15.4 使 用 定制 的 标识 


如 果 对 使 用 圆圈 、 方 块 、 圆 点 以 及 罗马 
数字 这 些 标 识 感到 厌倦 ， 也 可 以 使 用 图 像 创 
建 自己 定制 的 标识 。 要 使 用 定制 的 标识 ， 不 
必修 改 HTML ( 如 图 15.4.1 所 示 ) ， 仅 需 修 
Pk CSS (如 图 15.4.2 和 图 15.4.3 所 示 ) o 
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<body> 


«hi»PageWhacker, version 12.0: Features</h1> 
<ul> 
«li»0ne click page layout</li> 
«li»Spell checker for 327 major 
> languages«/li» 
«li»Image retouching plug-in«/li» 
«li»Unlimited Undo's and Redo’ s«/li» 
«i»Automatic book writing«/li» 
</ul> 
</body> 
</html> 























15.4.1. 这 个 列表 与 任何 普通 无 序列 表 都 是 相似 
的 , 不 过 ， 加 上 一 些 CSS (如 图 15.4.2 所 示 ) 后 ， 
它 看 起 来 就 不 一 样 了 (如 图 15.4.3 所 示 ) 




















ul { 
/* 取消 默认 标识 */ 
list-style: none; 


[* 为 列表 项 目 设 置 缩 进 */ 
margin-left: 0; 
padding-left: 15px; 








} 

li { 
/* 让 图 像 显 示 在 距离 顶端 2 像素 的 位 置 */ 
background: url(arrow-right.png) 
— no-repeat 0 2px; 
[* 将 文本 向 右 挤 压 ， 为 箭头 腾 出 空间 * 
padding-left: 25px; 

} 





15.4.2 首先， 清除 默认 的 标识 (这样 就 看 不 
到 符号 和 箭头 了 ) ， 调 整 列 表 项 目的 缩 进 大 小 。 
然后 为 每 个 列表 项 目 指定 箭头 背景 图 像 ， 将 它 的 
位 置 设 在 距离 1i 的 顶端 几 个 像素 的 地 方 ， 同 时 
为 1 增加 一 些 左 侧 内 边 距 ， 确 保 文本 不 会 覆盖 箭 
头 。 要 确保 background 的 url 部 分 中 的 图 像 路 径 
是 正确 的 。 这 里 的 url 应 该 是 图 像 相 对 于 样式 表 的 
位 置 ， 而 不 是 相对 于 HTML 的 位 置 (有 关 信 息 参 
JL 10.9 35 ) 
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PageWhacker, version 12.0: 
Features 


> One click page layout 

> Spell checker for 327 major languages 
> Image retouching plug-in 

> Unlimited Undo's and Redo's 

> Automatic book writing 





图 15.4.3 ”默认 的 圆 点 被 箭头 图 像 取 代 了 


使 用 定制 的 标识 

(1) 在 目标 列表 或 列表 项 的 样式 规则 中 ， 
输入 list-style: none; 以 取消 常规 的 标识 。 

(2) 在 目标 列表 的 样式 规则 中 ， 设 置 
margin-left 和 /或 padding-left 属性 ， 指 定 
列表 项 目 缩 进 的 大 小 。 (为 了 在 不 同 的 浏览 
器 上 实现 相似 的 效果 ， 通 常 需要 同时 设置 这 
两 个 属性 。) 同时 设置 margin-left: 0; 和 
padding-left: 0; 就 将 取消 所 有 的 缩 进 。 注 意 ， 
如 果 为 内 容 设 置 了 dir="rt1"， 那 么 就 应 该 设 
置 margin-right 和 padding-right 属性 。 关 于 
在 列表 中 使 用 dir, lang 及 从 右 至 左 的 语言 ， 
参见 15.1 节 的 提示 。 

(3) 在 目标 列表 的 1 元 素 的 样式 规则 中 ， 
输入 background: url(image.ext) repeat-type 

















horizontal vertical;, 其 中 image.ext 是 要 作 
为 定制 标识 的 图 像 的 路 径 和 文件 名 ，zepeat- 
type 是 no-repeat, repeat-x 和 repeat-y 中 
的 一 种 (通常 设 为 no-repeat) , horizontal 
和 vertical 值 表示 列表 项 目 中 背景 网 像 的 位 
置 (如 图 15.4.2 所 示 ) 。 

输入 padding-left: valve;， 这 里 的 value 
应 不 小 于 背景 图 像 的 宽度 ， 以 防 列表 项 目的 
内 容 覆 盖 到 定制 标识 的 上 面 。 
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在 url 和 前 括号 之 间 不 应 有 空格 ( 如 
图 15.4.2 Fr ) 。 包围 URL 的 引号 是 可 选 的 。 


注意 , 相对 URL 是 相对 于 样式 表 的 ， 
而 不 是 相对 于 网 页 的 。 
如 果 想 为 列表 中 的 某 一 个 或 几 个 项 目 


oo Ta 
类 定义 样式 规则 。 根 据 外 观 要 求 ， 可 能 需 

2 li 的 左 侧 外 边 距 进行 调整 ， 而 不 是 

对 父 元 素 01 或 岂 的 外 边 距 和 内 边 距 进行 调整 。 


另 一 种 显示 定制 标识 的 方法 是 使 用 
list-style-image 属性 。 例如，1i { list-style- 
image: url(image.png); }。 不 过 ， 使 用 这 种 方 
法 很 难 达到 预期 的 效果 ， 因为 不 同 浏览 器 对 它 
的 显示 效果 并 不 一 致 。 而 且 ， 使 用 图 15.4.2 所 
示 的 方法 可 以 更 好 地 控制 图 像 标识 的 位 置 ， 这 
也 是 人 们 倾向 于 使 用 这 种 方法 的 原因 。1ist- 
style-image 属性 会 履 盖 list-style-type 属性 。 
不 过 ， 如 果 出 于 某 种 原因 导致 图 像 未 能 加 载 ， 
则 会 使 用 由 list-style-type 指定 的 标识 。 


15.5 ”控制 标识 的 位 置 


默认 情况 下 ， 列 表 会 从 ( 其 父 元 素 的 ) 
左 侧 外 边 距 进 行 缩 进 。 标 识 可 以 向 右 对 齐 距 
离 起 点 一 半 长 度 的 位 置 (这 是 默认 情况 ) ， 
如 图 15.5.1 所 示 ， 也 可 以 缩 在 文本 块 内 CFR 
为 缩 排 ) ， 如 图 15.5.2 和 图 15.5.3 所 示 。 


控制 标识 位 置 的 步骤 

(1) 在 目标 列表 或 列表 项 目的 样式 表 规 则 
中 ,输入 list-style-position:, 

(2) 输入 inside 让 标识 缩 在 文本 块 内 (C 
见 图 15.5.2) ， 或 者 输入 outside 让 标识 显示 


在 列表 项 目 文本 的 左边 ( 这 是 默认 的 设置 ) 。 





Controlling where Markers Hang Mozilla mme 


File Edt Wew History Bookmarks Tools Help 





E | Controlling where Markers Hang 





PageWhacker, version 12.0: 
Features 


* One-click page layout. (This is particularly useful 
when you're under a heavy deadline. You just 
select whether you want the end product to be a 
book or a Web site, and poof, it's done!) 

* Spell checker for 327 major languages 

* Image retouching plug-in 

* Unlimited Undo's and Redo's 

* Automatic book writing 








图 15.5.1. 这 说 明了 在 默认 情况 下 浏览 器 呈现 列表 
项 目 文本 及 标识 之 间 相 对 位 置 的 方式 。 标 识 位 于 内 
容 的 外 边 。 可 以 通过 CSS 对 此 进行 修改 。 我 在 第 
一 个 特性 中 增加 了 一 些 文本 ， 从 而 让 标识 的 悬挂 缩 
进 效 果 更 为 明显 (参见 图 15.5.2 和 图 15.5.3 ) 














li { 
list-style-position: inside; 


} 


15.5.2 ”将 list-style-position iX i 7j inside 
可 以 改变 显示 方式 








Controlling where Markers Hang - Mozilla Te E 
File Edt Yew History Bookmarks Tools Help 





[e] J 


PageWhacker, version 12.0: 
Features 


| _ | Controlling where Markers Hang 





* One-click page layout. (This is particularly 
useful when you're under a heavy deadline. You 
just select whether you want the end product to be 
a book or a Web site, and poof, it's done!) 

* Spell checker for 327 major languages 

* Image retouching plug-in 

* Unlimited Undo's and Redo's 

* Automatic book writing 





15.5.3 ”每 行 的 标识 都 是 从 列表 项 目的 左 侧 外 边 
距 开始 的 ， 而 不 是 出 现在 左 侧 的 外 边 
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辆 阮 ”默认 情况 下 ， 标 识 出 现在 列表 段落 的 
外 边 。 
list-style-position 属性 是 继承 的 。 


15.6 同时 设置 所 有 的 列表 样式 
属性 
同 background, border, font, outline 
等 属性 一 样 ，CSS 也 为 list-style 提供 了 简 
写 形式 (如 图 15.6.1 和 图 15.6.2 所 示 ) 。 








li { 
list-style: inside circle; 
} 


15.6.1 使 用 这 条 样式 规则 等 价 于 将 list-style- 
position 设置 为 inside， 且 将 list-style-type 设 为 
circle。 这 样 写 更 为 简洁 。 还 可 以 在 简 记 法 中 指定 
list-style-image (参见 第 一 条 提示 ) 


























list-style Shorthand - Mozilla Firefos 





File Edit View History Bookmarks Tools Help 
| list-style Shorthand [+ - 








PageWhacker, version 12.0: 
Features 


o One-click page layout. (This is particularly 
useful when you're under a heavy deadline. You 
just select whether you want the end product to be 
à book or a Web site, and poof, it's done!) 

© Spell checker for 327 major languages 

o Image retouching plug-in 

o Unlimited Undo's and Redo's 

o Automatic book writing 





15.6.2 ”代码 的 实现 结果 与 图 15.5.3 相同 ， 除 了 
将 标识 改 成 圆圈 以 外 


同时 设置 所 有 的 列表 样式 属性 的 步骤 
(1) 输入 list-style:, 
Q) 如 果 需 要 ， 指 定 应 出 现在 列表 项 目 旁 


边 的 标识 类 型 (参见 15.2 45) 。 

Q) 如 果 需 要 ， 指 定 列 表 项 目 所 用 的 定制 
标识 (参见 15.4 节 最 后 一 条 提示 ) 。 

(4) 如 果 需 要 ， 指 定 标识 应 悬挂 在 列表 段 
落 之 外 或 缩 在 文本 块 内 (参见 15.5 节 ) 。 


如 果 要 在 简写 形式 的 属性 中 指定 
list-style-image， 图 15.6.1 中 的 例子 就 应 写 
成 li { list-style: url (arrow-right.png) 








inside square; }。 


可 以 指定 三 个 list-style 属性 ， 也 可 
以 指定 其 中 的 任意 一 个 ,图 15.6.1 中 指定 了 两 个 。 


辆 网 ”你 可 能 认为 ， 名 略 这 三 个 属性 中 的 一 
个 意味 着 对 该 属性 没有 影响 ， 但 事实 并 非 如 
此 。 任 何 没有 显 式 地 指定 的 属性 都 会 设 为 其 
默认 值 (1ist-style-type 的 默认 值 为 disc, 
list-style-image 的 默认 值 为 none，list- 
style-position 的 默认 值 为 outside) 。 


TD 可 以 按 任意 次 序 指定 这 些 属 性 。 


jump list-style 属性 是 继承 的 。 


15.7 设置 宜 套 列表 的 样式 


可 以 在 一 个 列表 中 插入 男 一 个 列表 ,里 
面 的 列表 就 称 为 放 套 列表 。 对 于 有 序列 表 和 
无 序列 表 均 可 创建 衣 套 列表 ( 混合 在 一 起 或 
AIRE ) 。 此 外 ， 还 有 另外 一 种 藤 套 列表 ， 
有 关 示 例 参 见 15.8 节 。 

如 果 要 按 有 序列 表 的 结构 创建 大 纲 ( 可 
能 需要 好 几 级 的 列表 项 目 ， 如 图 15.7.1、 
15.7.2 和 图 15.7.3 所 示 ) ， 或 者 需要 按 无 序列 
表 的 结构 创建 带子 菜单 的 导航 ( 如 图 15.7.4 
和 图 15.7.5 所 示 ， 更 多 细节 参见 “使 用 骨 套 
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列表 创建 下 拉 式 导航 ”) ， 就 会 发 现 嵌 套 列 。 [ uui 
表 很 有 用 。 可 以 通过 很 多 方式 为 黄 套 列表 设 font-size: .75em; 
9 GS = ` list-style-type: upper-roman; 
置 样式 ， 就 像 示例 所 展示 的 那样 。 ; pO i 
本 ol ol li ( 
<body> : list-style-type: upper-alpha; 
«hi»The Great American Novel«/hi» l ol ol li { 
«ol» ol ol ol li . 
«li»Introduction list-style-type: decimal; 
«ol» } 
<li>Boy's childhood</li> I 
di»Girl's childhoodc/li» lili{ 
</ol> font-size: 1em; 
</li> } 
<li>Development p 
cols 图 15.7.2 n AI RE RR E PA HO ETHER 
<li>Boy meets Girl</li> 化 。 如 果 要 对 列表 中 的 文本 使 用 em 或 百分数 设置 
«li»Boy and Girl fall in love 字体 大 小 ， 就 需要 添加 1i li (font-size: 1em; ) 
Ere and Girl have fight (或 者 将 lem FRN 100%) , VABTIERCEPIERAR 
aii 断 缩小 而 导致 难以 辨认 ( 参见 最 后 一 条 提示 ) 
«/ol» 
</li> - 
¿lisClimax Styling Nested Ordered Lists mapait oxi 
<ol> File Edit View History Bookmarks Tools Help 
«li»Bo ives Girl ultimatum PE] 
I E | | | Styling Nested Ordered Lists Eb 
«li»Girl can't believe 
^ her ears«/li» < ， : 7 
Bu de indiat at The Great American Novel 
> Girl's indignance«/li» E 
</ol> . Introduction 
</li> À. Boy's childhood 
«li»Girl tells Boy to get B. Girl's childhood 
> lost«/li» IL Development 
«/ol» À. Boy meets Girl 
</li> B. Boy and Girl fall in love 
<li>Denouement</li> , C. Boy and Girl have fight 
<1i>Epilogue</1i> Hi — 让 二 二 
«/ol» . Boy gives Girl ultimatum 
1. Girl can't believe her ears 
</body> 2. Boy is indignant at Girl's 
</html> indignance 
B. Girl tells Boy to get lost 


























15.7.1 iX HU Vu BRE de, 一 个 位 于 
Introduction 列表 项 目 内 ， 一 个 位 于 Development 
列表 项 目 内 ， 一 个 位 于 Climax 列表 项 目 内 ， 还 
有 一 个 突出 显示 的 粗 体 字 列表 位 于 Boy gives Girl 
ultimatum 列表 项 目 内 (该 列表 项 目 又 位 于 Climax 
列表 项 目 内 ) 





























IV. Denouement 
V. Epilogue 








15.7.3 ”第 一 级 列表 ( ol li ) 使 用 大 写 罗马 数字 ， 
第 二 级 列表 (ol ol li) 使 用 大 写字 母 ， 第 三 级 列 
表 (ol ol ol li) 使 用 阿拉 伯 数 字 











«body» 
«nav role-"navigation"» 
«ul class-"nav"» 
<li><a href-"/"»Home«/a»«/li» 
<li><a href-"/products/"»Products«/a» 
«ul» 
<li><a href-"/products/phones.html"»Phones«/a»«/li» 
<li><a href-"/products/accessories.html"»Accessories«/a»«/li» 
«/ul» 
</li> 
<li><a href="/support/">Support</a> 
<ul> 
<li><a href="http://www.thephoneycompany.com/support/forum/">Community Forum 
» </a></li> 
<li><a href="/support/contact-us.html">Contact Us«/a»«/li» 
<li><a href="/support/how-to-guides.html">How-to Guides«/a»«/li» 
</ul> 
</li> 
<li><a href="/about-us/">About Us</a></li> 
</ul> 
</nav> 


</body> 
</html> 

















图 15.7.4. Ue 5 — CEPIT, fex DET TP, 使 用 无 序列 表 构 建 导 航 菜单 ， 同 时 使 用 两 个 藤 套 
的 无 序列 表 构 建 子 菜单 。 注 意 ， 每 个 供 套 的 ul 都 包含 在 其 父 元 素 开始 标记 di» 和 结束 标记 </li> 之 内 。 



































通过 一 些 CS5， 可 以 让 导航 水 平 排列 ， 同 时 让 子 菜 单 在 默认 情况 下 隐藏 起 来 ， 并 在 访问 者 激活 它们 时 显示 
出 来 ， 如 图 15.7.5 所 示 























为 戏 套 列表 设置 样式 的 步骤 
(1) 要 设置 最 外 层 列 表 的 样式 ， 输 








About Us 









Home > Producte > Phones > The Fone 3.0™ 





The Fone 3.0" 


We're proud to introduce our latest innovate mobile device. You can make calls (it is a phone, after all), 
listen to music, record music, take photos, shoot video, edit songs, edit photos, edit video, chat with friends, surf 
the Web, read books, write books, run apps, play games, crunch numbers, flip channels, open your garage door, 
bake à l e through d riphone. It's a SuperPhone. 





style rules 是 要 应 用 的 样式 。 






We're saving that for 4.0. 








对 应 于 第 (1) 步 中 的 toplevel, 2ndlevel 则 
第 二 级 列表 的 类 型 。 


http: /jwww,thephoneycompany, comjsupport/forum 


15.7.5 Products 和 Support 列表 项 目 都 包含 









































CSS， 这 两 个 子 菜单 在 默认 情况 下 并 不 显示 出 来 。 2ndlevel 3rdlevel li (style rules), 其 中 ， 

















Zh 


入 


toplevel li (style rules}， 其 中 ,toplevel 
是 最 外 层 列表 的 类 型 (如 ol、 届 或 dt)， 


(2) 对 于 第 二 级 列表 ， 输 入 toplevel 
2ndlevel li (style rules), 其 中 ,，toplevel 


Ei 
AE 





WEE dE ul 中 的 子 菜单 ， 不 过 ， 由 于 应 用 了 一 些 人 


在 这 个 例子 中 ， Support 的 子 菜单 显示 出 来 了 ， 这 toplevel 和 2ndlevel 对 应 于 第 (1) 步 和 第 (2) 








EA BASEER TE O E Suppon 链接 及 了 并 步 中 的 toplevel fW 2ndlevel, 3rdlevel 则 
1 完整 个 1 ED 
«dn 第 三 级 列表 的 类 型 。 








AE 
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(4) 对 于 要 设置 样式 的 每 个 能 套 列 表 ， 继 
续 以 上 述 方法 进行 设置 。 


二 园 ”寺村 器 应 反映 文档 中 嵌 套 列表 的 类 型 ， 
例如 ,可 能 需要 使 用 Ul ul ol 1i 这 样 的 选择 器 。 


除了 上 述 方法 以 外 ， 也 可 以 为 每 个 广 
套 列 表 添 加 类 名 ， 再 设置 对 应 的 样式 。 不 过 ， 
这 里 演示 的 方法 可 以 在 不 改变 HTML 的 情况 下 
控制 样式 。 


D 无 论 识 套 的 层级 是 哪 一 级 ， 有 序列 表 
在 默认 情况 下 总 是 使 用 阿拉 伯 数 字 (1、2、 
。 可 以 使 用 list-style-type 指定 其 
他 的 编号 方案 。 根据 The Chicago Manual of 
Style 一 书 的 建议 ， 正 确 的 列表 谱 套 次 序 为 I、 
A、1、a (此 后 交替 使 用 1 和 a 编号 方案 ) 。 


默认 情况 下 ， 对 于 无 序列 表 ， 第 一 级 
列表 使 用 圆 点 符号 ， 下 一 级 列表 使 用 空心 圆 
点 符号 ， 第 三 级 及 后 续 各 级 列表 使 用 方块 符 
号 。 类 似 地 ， 可 以 使 用 1ist-style-type 指定 
希望 使 用 的 符号 类 型 (参见 15.2 3). 


使 用 座 套 列表 创建 下 拉 式 导航 


CNES 由 于 列表 项 目 (li 元 素 ) TARAA 
其 他 列表 项 目 内 ， 因 此 在 使 用 相对 值 指定 字体 
大 小 时 需要 留心 。 如 果 使 用 像 1]i (font-size: 
.75em; } 这样 的 样式 规则 ， 那 么 最 外 层 列表 
项 目的 字体 大 小 便 是 其 父 元 素 的 75%， 因 此 如 
果 该 父 元 素 的 字体 大 小 为 默认 的 16 像素 ， 那 
么 最 外 层 列表 项 目 就 是 12 像 素 大 小 ， 这 还 算 
好 。 但 是 ， 第 一 个 庶 套 列表 项 目的 字体 大 小 会 
是 其 父 元 素 (第 一 个 列表 项 目 ，12 像素 大 小 ) 
的 75%， 因 此 只 有 9 像素 。 每 一 级 都 会 迅速 让 
情况 变 得 更 糟糕 。 一 种 解决 方案 是 添加 1i li 
(font-size: 1em; }， 如 图 15.7.2 所 示 (或 者 
将 lem 替换 为 100%) 。 这 样 ， 赃 套 列表 项 目 
就 总 是 与 顶级 列表 项 目 一 样 大 ,如 图 15.7.3 所 示 。 


(由 Eric Meyer 提供 ， www.meyerweb.com. ) 


点 套 列表 的 一 种 使 用 场合 是 创建 下 拉 式 (或 飞 出 式 ) 导航 菜单 (如 图 15.7.4 所 示 ) 。 通 
过 使 用 CSS 为 导航 添加 一 些 样式 ， 可 以 让 每 个 子 菜单 仅 在 访问 者 鼠标 停留 在 其 父 元 素 的 列表 
项 目 上 时 显示 出 来 ( 如 图 15.7.5 所 示 ) ， 并 在 访问 者 将 鼠标 移 走 时 隐藏 。 

可 以 通过 多 种 方法 实现 这 一 效果 ， 但 这 些 方法 总 离 不 开 在 选择 器 中 使 用 :hover 伪 类 以 显 
示 子 菜单 。 下 面 演示 了 这 样 一 种 在 默认 情况 下 隐藏 族 套 列表 ， 并 在 访问 者 鼠标 停留 时 显示 该 


列表 的 方法 : 


/* 子 菜单 的 默认 状态 */ 
.nav li ul ( 


left: -9999em; /* 将 子 菜单 移出 屏幕 */ 
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position: absolute; 


z-index: 1000; 


/* 当 鼠 标 停留 在 父 元 素 11 上 时 子 菜单 的 状态 */ 
.nav li:hover ul ( 


display: block; /* 针对 IE 的 旧版 本 */ 


left: auto; /* 让 子 菜单 回 到 自然 状态 */ 


} 


对 应 的 HTML 如 图 15.7.4 所 示 。 要 实现 水 平 排 布 ， 移 除 列 表 项 目的 符号 ， 以 及 对 外 观 进 
行 调整 ， 都 需要 使 用 更 多 的 CSS。 图 15.7.5 中 所 示 页 面 的 完整 HTML 和 CSS 代码 见 本 书 配 
套 网 站 (www.bruceontheloose. com/htmlcss/ examples/chapter-15/dropdown-nav.html) 。 我 还 在 


代码 中 添 如 了 一 些 注释 。 


可 以 使 用 类 似 的 方法 创建 带 飞 出 式 子 菜单 的 垂直 导航 〈 子 菜单 显示 在 导航 的 侧 边 ) 。 


15.8 创建 描述 列表 


HTML 提供 了 专门 用 于 描述 成 组 出 现 
的 名 称 ( 术 语 ) 及 其 值 之 间 关 联 的 列表 类 
型 。 这 种 类 型 在 HTML5 中 称 为 描述 列表 
( description list) ， 而 在 HTML 的 早期 版 本 
中 则 称 为 定义 列表 。 

根据 HTMLS 规范 ，“ 由 名 称 及 其 值 构成 
的 组 合 可 以 是 术语 和 定义 、 元 数据 主题 和 值 、 
问题 和 答案 ， 以 及 任何 其 他 的 名 一 值 组 。” 
每 个 列表 都 包含 在 d 中， 其 中 的 每 个 名 - 值 
组 都 有 一 个 或 多 个 dt ER (名称 或 术语 ) 
以 及 一 个 或 多 个 dd 元素 (它们 的 值 ) B 
15.8.1 展示 了 一 个 基本 的 描述 列表 示例 。 除 了 
使 用 一 个 简单 的 样式 规则 ( 如 图 15.8.2 所 示 ) 
应 用 粗 体 以 外 ， 所 有 的 样式 都 是 默认 的 ( 如 
图 15.8.3 所 示 ) o 

以 下 都 是 dl 元 素 内 的 dt 和 dd 元素 的 组 
合 ， 这 些 安排 都 是 有 效 的 。 



































口 一 个 dt 同一 个 dd (参见 图 15.8.1， 同 
时 参见 图 15.8.7 中 Cast. 下 山 套 描述 列 
表 中 的 Director ) 。 这 是 最 常见 的 情形 。 
口 一 个 dt 同 多 个 dd 元 素 ， 参见 图 15.8.7 
中 的 Writers。 
口 多 个 此 元 素 同一 个 dd， 如 图 15.8.4 所 
示 。( 样式 设置 的 示例 如 图 15.8.5 和 
图 15.8.6 所 示 。) 
口 多 个 dt 元 素 同 多 个 dd 元素。 如 果 图 
15.8.4 中 的 bogeyman/boogeyman 有 多 
个 定义 ， 就 是 这 种 情形 。 
可 以 使 用 dfn 元素 包 围 dt 中 的 名 称 ， 指 
出 该 列表 是 用 于 定义 术语 的 , 如 在 术语 表 中 ， 
如 图 15.8.4 所 示 。( 关 于 dfn, 参见 4.10 节 。) 
可 以 对 描述 列表 进行 财 套 ( 如 图 15.87 所 示 ), 
并 通过 CSS 对 它们 添加 所 需 的 样式 ( 如 图 15.8.8 
所 示 ) 。 在 默认 情况 下 ， 如 果 一 个 d REES 
一 个 dl 中 ， 它 会 自动 进行 缩 进 ， 如 图 15.89 所 示 
( 当然 也 可 以 通过 CSS 对 此 进行 修改 ) 。 
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«body» 
«hi»List of Horror Movie Legends</h1> 


«dl» 
«dt»Boris Karloff«/dt» 


this 


«dt»Christopher Lee«/dt» 





«dd»Best known for his role in «cite»Frankenstein«/cite» and related horror films, 


—> scaremaster's real name was William Henry Pratt.«/dd» 


«dd»Lee took a bite out of audiences as Dracula in multiple Hammer horror 








classics.«/dd» 
dá 
</body> 
</html> 
15.8.1 这 是 最 基本 的 定义 列表 ， 每 个 名 - 值 组 都 由 一 个 dt dd 构成 。 每 个 组 之 间 的 空 行 仅仅 是 











为 了 提高 代码 的 可 读 性 而 添加 的 。 这 些 空 行 不 是 必需 的 ， 它 们 不 改变 内 容 的 含义 ， 也 不 影响 内 容 的 呈现 














dt ( 
font-weight: bold; 
) 
15.8.2 ”你 可 能 想 为 dt 元 素 中 的 术语 添加 一 些 


格式 ， 从 而 让 它们 突出 显示 (参见 图 15.8.3 ) 


Description List - Mozilla Firefox | xj 


File Edit wiew History Bookmarks | Tools Help 
| | Description List [+ * 








Horror Movie Legends 


Boris Karloff 
Best known for his role in 
Frankenstein and related horror films, 
this scaremaster's real name was 
William Henry Pratt. 

Christopher Lee 
Lee took a bite out of audiences as 
Dracula in multiple Hammer horror 
classics. 





15.8.8 在 默认 情况 下 ， 名 称 (dt) 向 左 对 齐 ， 
而 值 (dd) 则 有 缩 进 。 由 于 图 15.8.2 中 设置 的 简单 
样式 ， 名 称 以 粗 体 显示 。 如 果 没 有 设置 该 样式 ， 它 
们 将 以 常规 文本 显示 











«body» 
«hi»Defining words with multiple spellings«/hi» 


«dl» 
«dt»«dfn»bogeyman«/dfn», n.«/dt» 
«dt»«dfn»boogeyman«/dfn», n.«/dt» 
«dd»A mythical creature that lurks under 
the beds of small children.«/dd» 


«dt»«dfn lang-"en-gb"»aluminium 
— «/dfn», n.«/dt» 
«dt»«dfn»aluminum«/dfn», n.«/dt» 
«dd».. .«/dd» 

«/dl» 


«/body» 








</html> 
15.8.4 在 这 个 例子 中 ， 每 个 名 - 值 组 都 包含 多 


个 dt 和 一 个 dd， 因 为 这 些 术语 有 一 个 以 上 的 拼写 
方式 ， 而 它们 的 定义 是 相同 的 











dd + dt ( 
margin-top: 1em; 
) 


15.8.5 ”这 会 在 每 个 名 — 值 组 之 间 添 加 比 默认 设 
置 更 多 的 空间 
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7) Description List - Mozilla Firefos - eda xi 


Fie Edit view History Bookmarks Tools Help 


| L Description List 


















Defining words with 
multiple spellings 
bogeyman, n 

boogeyman, n 


À mythical creature that lurks under 
the beds of small children. 


aluminium, n. zj 
aluminum, n 


15.8.6 ”现在 可 以 清楚 地 看 到 各 组 描述 之 间 的 
间隔 了 。 由 于 aluminium, n. 所 在 的 dt 紧 跟 在 上 一 
名 一 值 组 中 的 dd 后面， 因此 图 15.8.5 中 的 样式 规 
则 发 挥 了 作用 








«body» 
«hi»Credits for «cite»AmBeacute;lie«/cite»«/h1» 


«dl» 
«dt»Director«/dt» 
«dd»Jean-Pierre Jeunet«/dd» 


«dt»Writers«/dt» «dd»Guillaume Laurant 
— (story, screenplay)«/dd» 
«dd»Jean-Pierre Jeunet (story)«/dd» 


«dt»Cast«/dt» 
«dd» 
<l-- 开始 谋 套 列表 --> 
«dl» 
«dt»Audrey Tautou«/dt» «!-- Actor/ 
— Actress --» 
«dd»Am&eacute;lie Poulain«/dd» 
oxL-- 角色 --> 


«dt»Mathieu Kassovitz«/dt» 
«dd»Nino Quincampoix«/dd» 


«/dl» 








de 结束 说 套 列表 --> 
«/dd» 
«/dl» 
«/body» 
«/html» 





15.8.7. ”这 是 一 个 描述 列表 的 例子 ， 它 描述 了 一 部 
包 影 的 导演 、 编 剧 和 演员 表 ， 其 中 的 演员 表 是 由 演 
员 姓 名 及 其 角色 构成 的 租 套 描述 列表 。 可 以 根据 需 
要 对 艇 套 的 列表 设置 不 同 的 样式 ( 如 图 15.8.8 所 示 ) 




































































dt ( 
font-weight: bold; 
text-transform: uppercase; 


} 


/# 为 任何 处 于 某 遇 之 内 的 另 一 个 时 的 dt 设置 样式 */ 
dl dl dt ( 

text-transform: none; 
) 


dd + dt ( 
margin-top: 1em; 
} 


图 15.8.8 REI EZIK PRAMEN P 
的 术语 进行 区 分 ， 因 此 我 对 dt 元 素 使 用 了 大 写字 
RHEN, PHATE dl 中 的 dt 元 素 重 新 设 为 常 
规 样式 ( 使 用 text-transform: none; 声明 ) 。 不 
过 ， 注 意 所 有 的 术语 均 以 粗 体 显示 ( 如 图 15.8.9 所 
示 ) ， 这 是 因为 第 一 条 样式 规则 中 的 声明 适用 于 所 
有 的 dt 元 素 ， 同 时 并 未 在 能 套 列表 的 样式 中 清除 
这 一 可 二 
































DEDIMUS oax] 


Eile Edt View History Bookmarks Tools Help 
| |. | Nested Definition List 





















Credits for Amélie 


DIRECTOR 
Jean-Pierre Jeunet 


WRITERS 
Guillaume Laurant (story, screenplay) 
Jean-Pierre Jeunet (story) 


CAST 
Audrey Tautou 
Amélie Poulain 


Mathieu Kassovitz 
Nino Quincamporix 


15.8.9 fESRA Tür, 4— d REEK 
一 个 d P, BEBE. TE 
图 15.8.8 中 的 样式 , 第 一 级 dt 元素 使 用 大 写字 母 ， 
而 徐 套 列表 中 的 dt 元 素 则 使 用 常规 样式 。 所 有 的 
dt 元 素 均 以 粗 体 显 示 
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创建 描述 列表 的 步骤 

(1) 输入 <dl>。 

(2) 输入 <dt>。 

(3) 输入 需要 描述 或 定义 的 单词 或 短语 ， 
包括 任何 额外 的 语义 元 素 (如 dfn) 。 

(4) 输入 «/dt» 以 完成 名 — 值 组 中 的 名 称 
部 分 。 

(5) 如 果 名 - 值 组 中 有 多 于 一 个 的 名 称 或 
术语 , 可 根据 需要 重复 第 2) 步 至 第 (4) F 
见 图 15.84) 。 

(6) 输入 «dd». 

CT) 输入 第 (3) 步 中 输入 的 术语 的 描述 。 

(8) 输入 «/dd» 以 完成 名 - 值 组 中 的 描述 

C8) 部 分 。 

(9) 如 果 名 一 值 组 中 有 和 多 于 一 个 的 定义 值 ， 
可 根据 需要 重复 第 (6) 步 至 第 (8) 2b. (参见 图 
15.8.7 中 的 Writers ) 。 





(10) 对 每 个 由 术语 和 描述 构成 的 组 ， 重 
复 第 (2) 步 至 第 (9) 步 。 
(11) 输入 </dl> 以 完成 整个 定义 列表 。 


对 于 描述 ( 值 ) ， Mp 
术语 (名称 ) 下 面 新 的 一 行 对 其 进行 缩 进 CR 


见 图 15.8.3 ) 。 


你 应 该 已 经 在 示例 (图 15.8.1、 
图 15.8.4、 图 15.8.7 ) 中 看 到 ， 不 必 (更 确切 
地 说 ， 不 应 该 ) 使 用 p 元素 对 dd 元 素 中 的 单 
个 文本 段落 进行 标记 。 不 过 ， 如 果 单 个 描述 
是 由 一 个 以 上 的 段落 构成 的 ， 就 应 该 在 一 个 
dd 元 素 中 使 用 多 个 p 元 素 对 其 进行 标记 ， 而 
不 是 将 每 个 段落 (不 使 用 p 元 素 ) 放 入 单独 
的 dd, 











本 章 内 容 

口 创建 表单 

口 处 理 表单 

o 通过 电子 邮件 发 送 表单 数据 
O 对 表单 元 素 进行 组 织 

口 创建 文本 框 
口 创建 密码 框 
a 创建 电子 邮件 框 、 电 话 框 和 URL ft 
口 为 表单 组 件 添加 标签 

口 创建 单 选 按钮 

口 创建 选择 框 
口 创建 复 选 框 
口 创建 文本 区 域 

口 让 访问 者 上 传 文件 

口 创建 隐藏 字段 

口 创建 提交 按钮 

口 使 用 图 像 提 交 表 单 

口 禁用 表单 元 素 

O HTML5 的 新 特性 和 浏览 器 支持 情况 














到 目前 为 止 ， 你 学 到 的 所 有 HTML 都 是 
用 于 帮助 你 将 自己 的 想法 告诉 访问 者 的 。 在 
本 章 中 ， 你 将 学 习 如 何 创 建 表单 ， 与 访问 者 
进行 交流 。 

表单 有 两 个 基本 组 成 部 分 : 访问 者 在 页 
面 上 可 以 看 见 并 填写 的 字段 、 标 签 和 按钮 的 
集合 ; 以 及 用 于 获取 信息 并 将 其 转化 为 可 以 








读 取 或 计算 的 格式 的 处 理 脚 本 。 

构造 表单 的 字段 和 按钮 很 直观 ， 同 创建 
网 页 的 其 他 部 分 是 相似 的 。 基 本 的 表单 字段 
类 型 包括 文本 框 、 特 殊 的 密码 框 、 单 选 按钮 、 
复 选 框 、 下 拉 沫 单 、 更 大 的 文本 区 域 ， 甚 至 
可 点 击 的 图 像 。 每 个 元 素 都 有 一 个 名 称 ， 作 
为 在 处 理 表单 时 用 于 标识 数据 的 标签 。 可 以 
使 用 CSS 对 表单 的 定位 和 格式 进行 控制 ， 让 
表单 变 得 清晰 且 易 于 使 用 。 

使 用 表单 通常 需要 用 到 一 种 服务 如 端的 
语言 以 接收 提交 的 信息 。 这 需要 位 于 Web 服 
务 需 的 代码 ， 用 于 收听 表单 的 响应 ， 并 对 响 
应 的 信息 进行 处 理 。 处 理 的 方式 包括 将 信息 
存 信 数据库， 使 用 电子 邮件 发 送信 息 ， 为 用 
户 提供 新 的 信息 ， 等 等 。 我 推荐 使 用 PHP 作 
为 入 门 的 语言 。 它 简单 明了 ， 且 非常 适合 制 
作 交 互 式 网 页 。 

还 有 很 多 其 他 的 用 于 处 理 表单 的 服务 器 
端 语 言 。 服 务 占 端 语言 超出 了 本 书 的 范围 ， 
甚至 解释 如 何 使 用 现 有 的 脚本 都 有 点 儿 超出 
界限 ， 因 此 我 将 提供 一 些 现成 的 脚本 帮 你 
起 步 。 





























16.1 创建 表单 


表单 有 三 个 重要 的 组 成 部 分 : form 元 
素 ， 其 中 包含 用 于 处 理 表单 的 脚本 的 URL 和 
处 理 表单 的 方法 (post 或 get) ; 表单 元 素 ， 
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如 字段 和 选择 框 ( 复 选 框 、 下 拉 菜 单 、 单 选 
按钮 ) ; 以 及 提交 按钮 ， 用 于 触发 向 服务 器 
上 的 接听 脚本 发 送 数 据 的 动作 ， 如 图 16.1.1 
所 示 。 








«form method-"post" action-"showform. 
php"? 
«fieldset» 
«h2 class-'account"»Account«/h2» 
«ul» 
di» 
«label for-"first name"»First 
— Name:«/label» 
«input type="text" id-"first 
— name" name-"first name" 
> class-"large" /> 
</li> 
di» 
«label for-"last name"»Last 
— Name:«/label» 
«input type="text" id-"last 
— name" name-"last name" 
 class-"large"/» 
</li> 


<input type="submit" 

> class="create_profile" 

— value="Create Account"> 
</fieldset> 








</form> 





16.1.1 每 个 表单 都 有 三 个 部 分 : form 元 素 、 
访问 者 输入 信息 的 实际 表单 元 素 以 及 用 于 将 收集 到 
的 信息 发 送 给 服务 器 的 提交 按钮 ( 或 活动 图 像 ) 
关于 对 表单 使 用 method="post" 还 是 
method="get" 的 选择 有 很 多 要 考虑 的 细节 。 
通常 情况 下 ， 我 推荐 使 用 method="post"， 
为 使 用 这 种 方法 可 以 向 服务 器 发 送 更 多 的 数 
据 ， 同 时 表单 中 的 信息 不 会 显示 在 URL 中 。 
因此 ， 如 果 需 要 在 数据 库 中 保存 、 添 加 和 删 
除数 据 ， 就 应 选择 post。 如 果 对 表单 使 用 
method="get" ， 那 么 表单 中 的 数据 会 显示 在 浏 

















览 器 的 地 址 栏 里 ， 这 样 ， 用 户 就 可 以 将 结 
存 和 书签。 大 多 数 搜索 引擎 都 会 在 搜索 表单 
中 使 用 method="get"， 从 而 让 用 户 可 以 保存 
搜索 查询 ， 或 者 将 查询 发 给 朋友 。 


创建 表单 的 步骤 

(1) 输入 <form method="post", 

(2) 输入 action="script.ur1">， 这 里 的 
script.url 是 提交 表单 时 要 运行 的 脚本 在 服 
52s ERME o 

(3) 根据 从 16.5 节 开 始 讲解 的 知识 ， 创 建 
表单 的 内 容 ( 包括 一 个 提交 按钮 ) 。 

(4) 输入 </form> 以 结束 表单 。 


可 以 在 本 书 的 配套 网 站 下 载 showform 
.php 脚本 (www.bruceontheloose.com/htmlcss/ 
examples/ ) ， 并 在 第 (2) 步 中 使 用 该 脚本 以 测 
试 表单 (在 本 章 中 都 可 以 使 用 该 脚本 对 表单 
进行 测试 ) 。 该 脚本 也 显示 在 图 16.2.1 Po 








GENES 为 了 让 访问 者 将 表单 中 的 数据 发 送 给 


你 ， 需 要 包含 一 个 提交 按钮 。 


可 以 使 用 CSS 对 表单 元 素 进行 布局 
(如 图 16.1.2 所 示 ) 。 贯 穿 本 章 的 表单 示例 
如 图 16.1.3 所 示 。 


还 可 以 使 用 get 方法 对 通过 表单 收集 
到 的 信息 进行 处 理 。 不 过 ， 由 于 get 方法 对 
一 次 性 可 以 收集 的 数据 的 量 有 限制 ， 而 这 个 
表单 中 有 一 个 文件 上 传 框 ， 因 此 我 推荐 使 用 
post 方法 。 
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fieldset { 
background-color: #f1f1f1; 
border: none; 
border-radius: 2px; 
margin-bottom: 12px; 
overflow: hidden; 
padding: 0 10px; 


} 

ul ( 
background-color: #fff; 
border: 1px solid #eaeaea; 
list-style: none; 
margin: 12px; 
padding: 12px; 

} 

ul li { 
margin: 0.5em 0; 

} 

label { 
display: inline-block; 
padding: 3px 6px; 
text-align: right; 
width: 150px; 
vertical-align: top; 

} 


input, select, button { 
font-size: 100%; 
j 


.small { 
width: 75px; 
) 


.medium { 
width: 150px; 
} 


.large { 
width: 250px; 
} 








16.1.2 这 是 用 于 











F 对 表单 进行 格式 化 的 样式 表 
的 一 部 分 。 完 整 的 样式 表 见 本 书 的 配套 网 站 www. 


bruceontheloose.com/htmlcss/examples/ 





Create a New Account 


AGCOUNT 
First Name: 
Last Name: 
Email: T 
Password: 


Re-enter Password: ~ 


Street Address: 站 
ciy: [— 


State: | Alabama = 


ZIP Code: 


PUBLIC PROFILE 


Picture: | Choose File | no flle selected 





Maximum size of 700k JPG. GIF. PNG. 








Screen Name: T 
Web: 


Have a homepage ora blog? Put he address here 


Gend Mal Femal 
EMAILS 
Itis okay fo email me with messages fram other users. 
Itis okay to email me with occasional promotions about our other 
products. 











16.4.3 ”这 是 本 章 讨论 的 完整 的 New Account 表单 


16.2 “处理 表单 


表单 从 访问 者 那里 收集 信息 ， 脚 本 则 对 
这 些 信息 进行 处 理 。 脚 本 可 以 将 信息 记录 到 
服务 器 上 的 数据 库 里 ， 通 过 电子 邮件 发 送信 
息 ， 或 者 执行 很 多 其 他 的 功能 。 

在 本 章 中 我 们 主要 关注 的 是 Web 表单 的 
创建 ， 因 此 我 们 会 使 用 一 个 非常 简单 的 PHP 
脚本 ， 当 访问 者 填写 并 提交 表单 时 ， 这 上 段 脚 
本 会 将 数据 返回 给 访问 者 ， 如 图 16.2.1 所 示 。 
我 还 将 提供 另 一 个 脚本 ， 用 于 将 表单 的 内 容 
发 送 到 你 的 电子 邮箱 ， 如 图 16.2.2 Bron s 
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<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Processing Form Data</title> 
<style type="text/css"> 
body { 
font-size: 100%; 
font-family: Arial, sans-serif; 


} 


</style> 

</head> 
<body> 
<p>This is a very simple PHP script that outputs the name of each bit of information (that 

» corresponds to the <code>name</code> attribute for that field) along with the value that was sent 
— with it right in the browser window.«/p» 
<p>In a more useful script, you might store this information in a MySOL database, or send it to your 
— email address.«/p» 
«table» 
«tr»cth»Field Name«/th»«th»Value(s)«/th»«/tr» 





<?php 
if (empty($_POST)) { 

print "«p»No data was submitted.</p>"; 
) else ( 


foreach ($ POST as $key -» $value) ( 
if (get magic quotes gpc()) $valuesstripslashes($value); 
if ($key-z'extras') ( 


if (is array($ POST['extras']) )( 
print "«tr»«td»«code»$key«/code»«/td»«td»"; 
foreach ($ POST['extras'] as $value) ( 
print "«i»$value«/i»«br />"; 


} 
print "</td></tr>"; 
} else { 
print "<tr><td><code>$key</code></td><td><i>$value</i></td></tr>\n"; 
} 
} else { 
print "<tr><td><code>$key</code></td><td><i>$value</i></td></tr>\n"; 
} 
} 
} 
?> 
</table> 
«/body» 
«/html» 











16.2.1 这 是 用 于 处 理 本 章 表单 的 脚本 。 注 意 PHP 脚本 放置 在 HTML 页 面 内 (可 以 在 本 书 配套 网 站 上 
找到 这 段 脚本 的 带 注释 版 本 ， 见 www.bruceontheloose.com/htmlcss/examples/ ) 
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Processing RI Edition ? — 45 ( Peachpit Press, 2011) 。] 我 

3 Processing Form Data *L * Nr. po 
=r s s coo J| 的 脚本 称 不 上 复杂 ， 恰 好 能 体现 PHP 的 简单 

xaT vum 性 。 不 需要 花费 太 多 的 工夫 ， 就 能 让 脚本 做 
SUA oa 我 需要 的 任何 事情 。 
insi rose.wood(Qtestemail.com 从 基本 的 服务 器 端 Web 任务 到 复杂 的 
assword ass1234 
eorr 2 Web 应 用 ( 如 WordPress 和 Drupal， 它 们 是 
re 人 最 流行 的 博客 与 内 容 管理 系统 ) PHP 都 能 
n M WEE, PHP 既是 一 种 入 门 级 的 编程 语言 ， 也 
picture rose picjpg 是 一 种 专业 的 编程 语言 。 随 着 你 技能 的 增长 ， 
screen_name rose1234 p 
web site http://www.rosewood.com PHP 也 能 跟 上 ! 
bio ALS techad Ki bo ne 除了 容易 学 习 以 外 ，PHP 还 有 很 多 其 他 
Me Efe ate MM 的 特性 让 它 成 为 处 理 HTML 表单 的 理想 语言 。 
email ok occasional updates ON 首先 ， PHP 是 一 种 解释 型 ( 又 称 脚 本 ) 语言 














16.2.2 图 16.2.1 中 的 脚本 会 在 浏览 器 窗口 中 将 


每 个 字段 的 名 和 值 通过 表格 呈现 出 来 














1. 关于 PHP 

PHP 是 一 个 递归 的 缩写 词 ， 它 表示 PHP: 
Hypertext Preprocessor。 这 是 一 种 开源 的 脚本 
语言 ， 它 是 专门 为 制作 交互 式 Web 页 面 而 设 
计 的 。 它 非常 简单 明了 [要 了 解 更 多 关于 使 用 
PHP 的 信息 ,我 强烈 推荐 Larry Ullman 的 PHP 
for the Web: Visual QuickStart Guide, Fourth 

















服务 器 端 与 客户 端 





这 意味 着 它 在 执行 前 不 需要 先进 行 编译 。 写 
完 PHP， 马 上 就 可 以 执行 。 其 次 ，PHP 脚 
本 可 以 是 独立 的 文本 文件 ， 但 也 可 以 直接 在 
HTML 页 面 中 编写 ， 这 使 得 PHP Web 设计 
人 员 来 说 特别 方便 。 

最 后 ， 由 于 PHP 是 专门 为 万 维 网 设计 的 ， 
因此 它 非 常 适合 执行 网 页 所 需 的 任务 ， 并 能 点 
HTML 很 好 地 协作 。 它 有 数 百 个 内 置 函 数 可 供 
利用 。 在 本 章 中 ， 我 们 只 会 简单 地 讨论 PHP 表 
单 处 理工 具 。PHP 的 官方 网 站 为 wwwphp.net。 





























PHP 是 一 种 服务 器 端 (server-side) 语言 ， 这 意味 着 它 运行 于 为 网 页 服务 的 计算 机 ( 称 为 
服务 器 ) , 而 不 是 查看 网 页 的 访问 者 的 计算 机 。 脚本 必须 上 传 到 服务 器 上 才能 发 挥 作用 ,此 外 ， 
服务 器 必须 已 经 安装 PHP. 才能 对 脚本 进行 解释 。 专 业 网 站 的 很 多 功能 (如 存储 数据 ， 发 送 电 


子 邮 件 等 ) 都 需要 服务 器 端 语言 。 


客户 端 (client-side ) 语言 (如 JavaScript ) 是 在 浏 


器 交互 的 情况 下 执行 很 多 任务 。 对 于 操纵 浏 


i7 

















(D 本 书 中 文 版 《PHP 基础 教程 (第 4 版 )》 已 


næ 


x 览 器 窗口 ， 在 提交 表单 前 检查 是 否 所 有 数据 都 已 
填写 ， 以 及 其 他 不 需要 服务 器 (或 在 涉及 服务 器 之 前 ) 的 任务 ， EP 


人 民 邮 


n pe 
A e> 


中 运行 的 。 它 们 可 以 在 完全 不 与 服务 


端 语言 都 很 适合 。 








电 出 版 社 出 版 ， 详 细 信 息 参见 图 灵 社 区 本 书页 面 http://www. 




















ituring.com.cn/book/741。 编者 注 





c 


16.3 ”通过 电子 邮件 发 送 表 单数 据 287 





























2. 安全 性 $key = clear user input($key); 

向 服务 器 发 送 数 据 的 时 候 ， 尤 其 需要 注意 $value = clear user input($value); 
安全 性 。 不 要 对 数据 作 任何 假设 ， 因 为 即便 对 E A 
表单 建立 了 安全 措施 ， 坏 人 也 可 以 创建 他 们 自 if (is array($ POST['extras']) ){ 
己 的 表单 ， 调 用 你 的 脚本 并 发 送 无 数 的 垃圾 信 ina s 
息 。 应 该 显 式 地 检查 数据 ， 确 保 它 们 是 符合 预 ced ($ PosT['extras'] as 
期 的 ， 不 包含 任何 额外 的 有 害 内 容 。 Bi EEE 

和 空格 

3. PHP 的 替代 语言 或 框架 if (sizeof($ POST['extras']) 

有 很 多 其 他 的 语言 或 框架 可 以 替代 PHP Moor 
对 表单 进行 处 理 ， 如 Microsoft 的 ASPNET、 break;} 
Adobe 的 ColdFusion， 以 及 JSP (Java Server e "TE 
Pages) , Ruby on Rails 等 。 $counter += 1; 

} 


16.3 ”通过 电子 邮件 发 送 表 单数 据 Wg 


$body .= "$key: $value\n"; 
































如 果 不 想 为 服务 絮 端 脚本 操心 ， 并 且 能 够 Lm i 
处 理 未 经 格式 化 ( 或 未 经 脚本 预 处 理 ) 的 数据 ， 
可 以 选择 通过 电子 邮件 发 送 访问 者 的 数据 ， 如 ade bir usta 
图 16.3.1 ~ 图 16.3.4 所 示 。 ) 
La. extract($_POST); 
<body> $email = clear_user_input($email); 
$first_name = clear_user_input 
<?php > ($first name); 
// 这 是 一 个 非常 简单 的 PHP 脚 本 …… 
if (empty($ POST)) ( $froms'From: '. $email . "(" . $first - 
print "«p»No data was submitted.«/ name . ")" . "Arin" . 'Bcc: yourmailG 
p>"; — yourdomain.com' . "\r\n"; 
print "«/body»«/html»"; 
exit(); 


$subject - 'New Profile from Web Site'; 


function clear user input($value) ( 


if (get magic quotes gpc()) mail ('yourmail6yourdomain.com', 

+ $value-stripslashes($value); $subject, 

$value= str replace( "WM", '', > $body, $from); 

— trim($value)); ?> 

$value- str replace( "WX", '', $value); 

return $value; <p>Thanks for your signing up!«/p» 
«/table» 
«/body» 


$body -"Here is the data that was 

> submitted: Wn"; 

foreach ($ POST as $key -» $value) ( 图 16.3.1 这 是 用 于 通过 电子 邮件 发 送 数据 的 脚本 。 
Gio UR) 可 以 在 本 书 的 配套 网 站 找到 这 上 段 脚本 的 带 注释 版 本 


</html> 





















































ACCOUNT 


First Name: Rose 








Last Name: Wood 





Email: rose. woodQtestemail.com 
Password: | 


Re-enter Password: 


ADDRESS 


Street Address: |27 Carpenter Street 








City: Maplewood 
State: | California $ 


ZIPCode: [92102 | 











16.3.2 ”除了 对 action 字段 进行 了 更 新 ， 这 个 
表单 与 图 16.1.3 是 一 样 的 











Emailing Form Data 
Url z 
v] (88 cos) [€ - 





Emailing Form Data 


(aj {e| 








Go to a Web Site 








Thanks for your signing up! 








x 


16.3.3 ”让 访问 者 知道 刚刚 发 生 了 什么 总 是 一 个 


好 主意 





New Profile from Web Site = 


Ibo x 


Rose rose. wood(Otestemail.com via ravens.dreamhost.com 
lo me iv 


Here is the data that was submitted 
first name: Rose 

last name: Wood 

email: rose. wood(?testemail.com 
password: password 

password2: password 
street_address: 27 Carpenter Street 
city: Maplewood 

state: CA 

zip code: 92102 











16.3.4 ”这 是 表单 提交 后 收 到 的 电子 邮件 


通过 电子 邮件 发 送 数据 的 步骤 

(1) 输入 <form method="post", 

(2) 输入 action-"emailform.php", 3X Hi 
的 emailform.php 是 将 数据 发 送 到 电子 邮件 地 
址 的 脚本 。 

(3) 输入 >。 

(4) 根据 从 16.5 节 开 始 讲解 的 知识 ， 创 建 
表单 的 内 容 。 

(5) A </form>, 


可 以 要 求 访问 者 输入 两 遍 电 子 邮 件 
地 址 ， 然 后 让 脚本 对 这 两 个 字段 进行 比较 ， 
如 果 不 一 致 就 返回 错误 。 这 种 验证 可 以 防 
止 输入 错误 ， 这 些 错误 会 导致 收 不 到 表单 
数据 。 





可 以 在 本 书 的 配套 网 站 找到 脚本 代 


码 (www.bruceontheloose.com/htmlcss/exam- 


ples/) 。 你 可 以 在 自己 的 网 站 上 使 用 该 脚本 。 


全 如果 这 段 脚 本 在 你 的 服务 器 上 不 起 作 
用 ， 这 可 能 是 因为 你 的 服务 器 没有 安装 PHP。 
请 联系 你 的 Web 主机 提供 商 并 请 求 帮助 (或 
查看 他 们 的 支持 页 面 ) 。 


16.4 ”对 表单 元 素 进 行 组 织 


如 果 表 单 上 有 很 多 信息 需要 填写 ， 可 以 
使 用 fieldset 元 素 将 相关 的 元 素 组 合 在 一 起 ， 
使 表单 更 容易 理解 ， 如 图 16.4.1 所 示 。 表 单 
越 容 易 让 访问 者 理解 ， 访 问 者 就 越 有 可 能 正 
确 地 填写 表单 。 可 以 使 用 legend 元 素 为 每 个 
fieldset 提供 一 个 标题 (caption) ， 用 于 描述 
每 个 组 的 目的 ， 如 图 16.4.2 所 示 。 


对 表单 元 素 进行 组 织 的 步骤 
(1) 在 form 开始 标记 的 下 面 、 任 何 希 望 








164 ”对 表单 元 素 进行 组 织 289 





包含 在 第 一 个 组 的 表单 元 素 的 上 面 ， 输 入 
«fieldset», 

(2) 如 果 需 要 ， 输 入 <legend。 

(3) 如 果 需 要 ， 输 入 aligne"direction", 
这 里 的 direction 可 以 是 left 或 Tight。 

(4) 输入 >。 

(5) 输入 标签 的 文本 。 

(6) 输入 </legend> 以 完成 标签 。 

(7) 创建 属于 第 一 组 的 表单 元 素 。 更 多 信 
息 参 见 从 16.5 节 开 始 讲解 的 知识 。 














(8) 输入 </fieldset> 结束 第 一 组 表单 元 素 。 
(9) 为 每 一 组 表单 元 素 重 复 第 (1) 步 至 第 
(8) 步 。 


CSS 对 legend 元 素 的 定位 能 力 很 有 

EAAXE 数 浏览 器 中 对 该 元 素 设 置 样 
ive 限制 的 原因 (如 图 16.4.3 所 示 ) 。 
推荐 使 用 具有 恰当 样式 的 p 或 hl ~ h6 元 素 重 
新 创建 标题 的 效果 ， 如 图 16.4.4、 图 16.4.5 和 
图 16.4.6 所 示 。 


可 选 的 。 


使 用 fieldset 元 素 对 表单 进行 组 织 是 





«form method-"post" action-"showform.php"» 
«fieldset» 
«legend»Account«/legend» «/fieldset» 
«fieldset» 
«legend class-"address"»Address 
^ «/legend» 
«/fieldset» 
«fieldset» 
«legend class-"public- 
profile"»Public 
> Profile«/legend» 
«/fieldset» 











16.4.1 我 为 fieldset 元 素 添 加 了 样式 ， 并 为 每 个 
legend 元 素 添 加 了 class 属性 ， 以 帮助 对 每 组 表单 
元 素 应 用 样式 

















fieldset ( 
background-color: #f1f1f1; 
border: none; 
border-radius: 2px; 
margin-bottom: 12px; 
overflow: hidden; 
padding: O 10px; 


} 

legend { 
background-color: #dedede; 
border-bottom: 1px solid #d4d4d4; 
border-top: 1px solid #d4d4d4; 
border-radius: 5px; 
box-shadow: 3px 3px 3px #ccc; 
color: #fff; 
font-size: 1.1em; 
margin: 12px; 
padding: O.3em 1em; 
text-shadow: #9FBEB9 1px 1px 1px; 
text-transform: uppercase; 

} 


legend.account { background-color: #0B5586; } 
legend.address { background-color: #4494C9; } 
legend.public-profile { background-color: 

> #377D87; } 

legend.emails { background-color: #717F88; } 








LI 


E 16.4.2 我 为 所 有 的 fieldset 元 素 添 加 了 外 边 距 、 
背景 颜色 和 内 边 距 ， 并 为 每 个 标签 添加 了 特殊 的 背 
景 颜 色 























Form Legends 
[a Form Legends lel 
aelel coway] coa) 
First Name: 
Last Name: 
Email: 
Password: 
Re-enter Password: 
Street Address: 
City: 
State: | Alabama + 
y ^ 
E 16.4.3 浏览 器 限制 了 对 legend 元 素 添加 样式 











的 能 力 。 如 果 想 更 好 地 控制 标签 的 格式 ， 可 以 使 用 
上 类 名 的 标题 或 p 元 素 
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«form method-"post" action-"showform.php"» 
«fieldset» 
«h2 classz"account"»Account«/h2» 








对 各 个 表单 元 素 进 行 分 隔 有 很 多 方 
法 。 在 这 些 例 子 中 ， 我 们 使 用 无 序列 表 ， 如 
图 16.5.1 和 图 16.5.2 所 示 ， 使 用 div、 











16.4.4 ”由 于 大 多 数 浏览 器 对 legend 元 素 的 样 
式 控 制 能 力 不 足 ， 因 此 推荐 使 用 常规 的 标题 元 素 











h2 ( 
background-color: itdedede; 
border-bottom: 1px solid #d4d4d4; 
border-top: 1px solid #d4d4d4; 
border-radius: 5px; 
box-shadow: 3px 3px 3px #ccc; 
color: &fff; 
font-size: 1.1em; 
margin: 12px; 
padding: 0.3em 1em; 
text-shadow: #9FBEB9 1px 1px 1px; 
text-transform: uppercase; 


} 


El 16.4.5 这 里 对 legend h2 添加 了 背景 、 边 框 以 
及 其 他 的 一 些 稍 后 即将 了 解 的 CSS3 特性 




















Creating a Form 








j E3 Creating a Form bt E: 
ae [€] [rcov awe se Pv | oe Q)[9 
ACCOUNT 
First Name: 
Last Name: 
Email: | 


Password: 


Re-enter Password: | 


ADDRESS 


Street Address: | 
City: | 


x 


16.4.6 现在， 标签 拥有 了 更 多 的 样式 设置 选项 














16.5 创建 文本 框 


文本 框 可 以 包含 一 行 无 格式 的 文本 ， 
可 以 是 访问 者 想 输入 的 任何 内 容 ， 通 常用 于 
姓名 、 地 址 等 信息 。 

















p 或 br 元素 对 表单 元 素 进 行 组 织 也 是 可 行 的 。 
«form method-"post" action-"showform.php"» 
«fieldset» 
«h2 class-'account"»Account«/h2» 
«ul» 

di» 
«label for-"first name"»First 
— Name:«/label» 
«input type="text" id-"first - 
—^ name" name-"first name" 
> class-"large" required- 
"required" 
placeholder-z"Enter 
— your first name" /> 

</li> 

<li> 
«label for-"last name"»Last Name: 
 «/label» 
«input type="text" id-"last. 
—^ name" name-"last name" 
> class-"large"/» 

</li> 

图 16.5.1 必须 为 每 个 文本 框 设 置 name 属性 ; 只 











有 在 希望 为 文本 框 添加 默认 值 的 情况 下 才 需 要 设置 


Fg | 
value 属 














Creating a Form 








Creating a Form lèl zz 
4i |E] |i coto Pv | ($7 Cooge Q)ie- 
ADDRESS 
Street Address: | — |] 
City: | 





State: | Alabama +! 


ZIP Code: | 


PUBLIC PROFILE 


Picture: | Browse... 


Maximum size of 700k. JPG, GIF, PNG. 


Screen Name: | 











Wlah: 
x 


16.5.2 文本 框 可 以 设置 为 不 同 的 大 小 ， 以 容纳 不 
同类 型 的 字段 。 这 个 例子 是 通过 类 设置 宽度 的 ， 还 
可 以 通过 HTML 元 素 上 的 size="n" 属性 设置 宽度 











可 
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新 的 HTML5 表单 输入 属性 

表单 是 令 大 多 数 开发 人 员 感 到 头疼 的 
HTML 领域 之 一 ， 因 为 通常 需要 编写 额外 
的 CSS 和 JavaScript 才能 让 表单 正常 运行 。 
为 了 让 表单 更 易于 使 用 ，HTML5 对 它 进 行 
了 大 量 的 增强 ， 其 中 的 很 多 特性 现在 就 可 
以 使 用 。 

这 些 属 性 包括 autofocus、required、 
placeholder, maxlength 和 pattern。 在 接 下 
来 的 例子 中 ， 你 将 逐一 学 习 这 些 特性 。 

不 支持 这 些 新 特性 的 旧 浏 览 器 会 忽略 这 
些 属性 。 很 多 开发 人 员 使 用 JavaScript 来 填 
补 这 些 浏览 器 在 功能 上 的 差距 。 

关于 HIMLS 表单 的 现状 ， 以 及 浏览 器 
对 每 个 特性 的 支持 情况 ， 参 见 http://wufoo 
com/html5 。 


创建 文本 框 的 步骤 

(1) 如 果 需 要 ， 输 入 用 于 让 访问 者 识别 文 
本 框 的 标签 (例如 Name: ) 。 

(2) fij, A «input type="text", 

(3) 输入 name-"Iabel", 3X Hif) label 是 
用 于 让 服务 器 ( 和 脚本 ) 识 别 输入 数据 的 文本 。 

(4) 输入 id-"label", 3X Hif) label 是 
用 于 让 对 应 的 标签 元 素 识 别 文本 框 的 文本 ， 
后 面 很 快 就 会 解释 这 一 点 。 它 还 用 于 让 
JavaScript 为 表单 添加 功能 。 很 多 程序 员 将 id 
和 name 设 为 同一 个 值 ， 尽 管 这 并 不 是 必需 的 。 

(5) 如 果 需 要 ， 输 入 value-"default", iX 
里 的 default 是 这 个 字段 中 最 初 显示 的 数据 ， 
如 果 访 问 者 没有 输入 别 的 内 容 的 话 ， 这 一 数 
据 将 被 发 送 到 服务 器 。 

(6) 如 果 需 要 , 输入 required-"required", 
表示 仅 在 这 个 字段 有 值 的 情况 下 才能 提交 表 
单 ， 如 图 16.5.3 所 示 。 








(7) 如 果 需 要 , 输入 placeholder="hinttext"， 
这 里 的 hinttext 是 这 个 字段 中 最 初 显 示 的 数 
据 ， 用 于 指导 用 户 的 输入 ， 如 图 16.5.4 所 示 。 





当 input 元 素 获 得 焦点 时 , 这 些 文本 将 会 消失 ， 
让 用 户 输入 内 容 。 


(8) 如 果 和 需要, 输入 autofocus-"autofocus" , 
如 图 16.5.5 所 示 。 如 有 果 这 是 第 一 个 拥有 此 属 
性 的 input 元 素 ， 该 元 素 在 页 面 加 载 时 会 默认 




















(9) 如 果 和 需要， 通过 输入 size-"n" 定义 文 
本 框 的 大 小 ， 这 里 的 n 是 需要 设置 的 文本 框 
宽度 ， 以 字符 为 单位 。 也 可 以 使 用 CSS 设置 
输入 杠 的 宽度 。 

(10) 如 果 需 要， 输入 maxlength="n"， 这 
里 的 n 是 该 文本 框 允许 输入 的 最 大 字符 数 。 

(11) 最 后 ， 输 入 />， 结 束 文 本 框 。 





























eoo Creating a Form 

ci Creating a Form E3 ~ 

(a)r Jae E co to a web site > v SY coogi a J (a ie) 
ACCOUNT 


First Name: 
Last Nam s ^d GRE 
Em 


Password: 





Re-enter Password: | 











T) 
16.5.3 可 以 将 文本 框 指定 为 必须 填写 内 
容 才 能 提交 表单 。 可 以 通过 添加 required 或 
required-"required" 属性 指定 文本 框 为 必 填 字段 。 
这 是 HTMLS 的 新 特性 ， 旧 的 浏览 器 将 忽略 这 一 属 
性 。 即 便 添 加 了 这 一 属性 ， 也 应 该 在 服务 器 端 对 表 
单 进 行 验证 ， 同 时 ， 可 以 使 用 JavaScript 在 浏览 
中 对 字段 进行 检查 






































鲁 国 即便 访问 者 跳 过 了 某 个 字段 ( 而 你 没 
有 使 用 value 属性 设置 默认 文本 ) name Æ 
性 仍 将 被 发 送 到 服务 器 ( 使 用 未 定义 的 空 值 )。 
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Creating a Form 


TIS aForm —— Li L E x 


4j | lela 





Pv (A Go0oQ】 "or 


, Go to a a Web : Site 


First Name: Enter your first name 





Last Name: 





Email: 


Password: 





Re-enter Password: 





x 


图 16.5.4” 占 位 符 是 为 用 户 填 写 表单 提供 提示 和 额 
外 指导 的 好 方法 。placeholder 属性 中 的 文本 会 以 
浅 灰色 出 现在 文本 框 中 。 当 用 户 开 始 在 字段 中 输入 
文本 时 ， 浅 灰色 文本 就 会 消失 。 如 果 用 户 在 没有 输 
入 任何 信息 的 情况 下 将 焦点 移 开 ， 浅 灰色 文本 又 会 
了 次 出 现 。 这 是 HTMLS 的 另 一 项 新 特性 ， 旧 浏览 
器 会 忽略 它 




































































16.6 ”创建 密码 框 


密码 框 与 文本 框 的 唯一 区 别 是 ， 密 码 框 
中 输入 的 文本 会 使 用 圆 点 或 星 号 进行 隐藏 
如 图 16.6.1 和 图 16.6.2 所 示 。 不 过 ， 这 些 
息 在 发 往 服务 器 时 并 未 加 密 。 




















信 





di» 
«label for-"password"»Password:«/label» 
<input type-"password" id-"password" 
— name-"password" /> 

</li> 

<li> 
<label for="password">Re-enter Password: 
> </label> 
<input type="password" id="password2" 
— name="password2" /> 

</1i>/> 

















图 16.6.1 编译 数据 时 , password 属 性 会 识别 密码 。 











«input type="text" id-"first name" name= 
— "first name" class-"large" required- 

— "required" placeholder-"Enter your first 
— name" autofocus-"autofocus" /> 














图 16.5.5 让 某 个 字段 在 页 面 加 载 时 自动 获得 
焦点 是 很 有 益处 的 ， 这 样 ， 用 户 就 可 以 立即 开始 
输入 。 使 用 autofocus="autofocus" 属性 可 以 让 
浏览 器 将 光标 放置 在 第 一 个 拥有 此 属性 的 表单 元 
素 中 














文本 框 大 小 的 默认 值 为 20。 不 过 ， 
访问 者 可 以 输入 更 多 的 字符 ， 直 到 达到 
maxlength 属性 规定 的 限制 。 如 果 需 要 更 大 的 
可 以 容纳 好 几 行 文本 的 字段 ， 最 好 使 用 文本 
区 域 。 


E 不 要 将 placeholder 属性 同 value Æ 
性 弄 混 。 它 们 都 会 让 文本 框 默认 出 现 一 些 文 
本 ， 但 placeholder 文本 会 自动 消失 ， 且 不 会 
被 发 送 到 服务 器 ， 而 value 在 输入 框 获得 焦点 
时 不 会 消失 ， 且 这 些 内 容 会 被 发 送 到 服务 器 。 

















id 属性 用 于 添加 样式 ， 并 提供 对 标签 的 引用 。type 
属性 必须 设 为 password， 但 id 和 name 可 以 是 任何 
不 包含 空格 的 值 






































Creating a Form 


Creating a Form L *| = 


»v| W cQ) | * < 
ACCOUNT 


First Name: Rose 








4| @|]| Gotoa web Site 














Last Name: Wood 





Email: |rose.wood(testemail.com 





Password: |eeeeccse 





Re-enter Password:  eeeecece 


16.6.2” 当 访问 者 在 表单 中 输入 密码 时 ， 密 码 用 
圆 点 或 星 号 隐藏 起 来 了 

创建 客 码 框 的 步骤 

(1) 输入 用 于 让 访问 者 识别 密码 框 的 标 
签 ， 例 如 «label for="]abel">Password</label>, 
这 里 的 Jabel 应 与 第 (4) 步 中 的 标签 相同 。 关 
于 标签 ， 参 见 16.8 节 。 
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(2) fij, X «input type="password"。 

(3) 输入 name-"Iabel", 3X Hif label 是 
JH-FiENHR Ar ir CORNUA ) 识别 输入 数据 的 
文本 。 

(4) 输入 ide" label", iX Hif] label 是 用 
于 让 对 应 的 标签 和 JavaScript 识别 输入 字段 的 
文本 。 

(5) 如 果 需 要 , 输入 required="required", 
表示 仅 在 这 个 字段 有 值 的 情况 下 才能 提交 
表单 。 

(6) 通过 输入 size-"n" 定义 密码 框 的 大 
小 ， 这 里 的 是 需要 设置 的 密码 框 宽度 ， 以 
字符 为 单位 。 也 可 以 使 用 CSS 设置 输入 框 的 
宽度 。 

(7) 输入 maxlengthe"n", ix HH n 是 该 密 
码 框 允 许 输入 的 最 大 字符 数 。 

(8) 最 后 ， 输 入 / >， 结束 密 码 框 。 





即便 密码 框 中 没有 输入 任何 内 容 ， 
name 属性 仍 将 被 发 送 到 服务 器 (使 用 未 定义 
的 value) 。 


密码 框 提供 的 唯一 保护 措施 就 是 防止 
其 他 人 看 到 用 户 输入 的 密码 。 如 果 要 真正 地 
保护 密码 ， 可 以 使 用 安全 服务 器 ( https:// ) 。 


16.7 创建 电子 邮件 框 、 电 话 框 
和 URL 4E 


电子 邮件 、 电 话 和 URL 这 几 种 输入 类 型 
是 HTML5 中 新 增 的 。 它 们 看 起 来 同文 本 框 很 
相似 ， 但 却 有 一 些小 而 有 用 的 特性 ， 用 于 帮 
助 验 证 和 输入 内 容 ， 如 图 16.7.1, B 16.7.2 和 
图 16.7.3 所 示 。 浏 览 器 对 这 些 新 字段 的 支持 
程度 正在 增加 ， 而 旧 的 浏览 器 会 将 它们 当做 
文本 框 进行 处 理 ， 如 图 16.7.4 所 示 。 





























ooo Creating a Form 

m Creating a Form l + a Ve 

4 o to a Web Site P |C coge Q j| 

OT A cw M CHE Cn 
ACCOUNT 





First Name: |Enter your first name 


Last Name: | | 





Email: 


Wel 
Please enter an email addres 





Phone: |xxx-xxx-xxxx 











图 16.7.1. 当 访问 者 在 电子 邮件 字段 中 输入 文本 
时 ,浏览 器 会 对 输入 的 文本 进行 检查 ， 确 保 它 是 有 
效 的 电子 邮件 地 址 格式 。 如 果 没 有 添加 required 
属性 ， 那 么 空 的 字段 也 可 以 通过 验证 


























ACCOUNT 


First Name: |Enter your first name 





Last Name: | 





Email: | | 











E 16.7.2 当 访 问 者 在 Web 字段 中 输入 文本 时 ， 
浏览 器 会 对 输入 的 文本 进行 检查 ， 确 保 它 是 有 效 
的 URL 格式 。 注 意 ，www.cnn.com 并 不 是 有 效 的 





URL， 因 为 URL 必须 以 http:/ 或 https:/ 开头 。 这 





里 最 好 使 用 占 位 符 提 示 访 问 者 


创建 电子 邮件 框 、 电 话 框 和 URL 框 的 步 又 
(1) 如 果 需 要 ， 输 入 用 于 让 访问 者 识别 框 
的 标签 ， 例 如 <label for-"idlabel"»Email«/ 
label>， 这 里 的 id1abel 应 与 第 (4) 步 中 的 


idlabel 相同 。 你 将 在 下 一 方 学 习 标签 。 


(2) 对 于 电子 邮件 框 ， 输 入 <input type= 
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"email" 对 于 URL 框 ,输入 <input type="ur1"; 
对 于 电话 框 ， 输入 «input type-"tel", 

(3) 输入 name="1abe1"， 这 里 的 1abel 是 
用 于 让 服务 器 ( 和 脚本 ) 识 别 输入 数据 的 文本 。 

(4) 输入 id="id1abe1"， 这 里 的 idlabel 
是 用 于 让 对 应 的 标签 和 JavaScript 识别 输入 字 
段 的 文本 。 

(5) 如 果 需 要 , 输入 required="required", 
表示 仅 在 这 个 字段 有 值 的 情况 下 才能 提交 表单 。 

(6) 如 果 需 要 ， 输 入 pattern-'"regex", iX 
里 的 regex 是 将 输入 的 内 容 限 定 为 特定 格式 的 
正则 表达 式 。 

(7) 如 果 需 要 ， 通 过 输入 size="n" 定义 框 
的 大 小 ， 这 里 的 n 是 需要 设置 的 框 的 宽度 ， 
以 字符 为 单位 。 

(8) 如 果 需 要 ， 输 入 maxlength="n"， 这 里 
的 n 是 该 框 允许 输入 的 最 大 字符 数 。 

(9) 最 后 ， 输 入 / >， 结束 输 入 框 。 

















eee Creating a Form 




















i e Creating a Form l + x: 
eM [e co to a web sie > v I($- Goose a atis] 
ACCOUNT 
First Name: |Enter your first name 
Last Name: E B 
Email: 
Web: | i 


Have a homepage or a blog? Put the address here. 


123-555-55 
T format 


Phone: 


Create Acrount 


16.7.3 ” 当 访问 者 在 电话 字段 中 输入 文本 时 ， 浏 
览 需 会 对 输入 的 文本 进行 检查 ， 确 保 它 符 合 XXX- 




































di» 
«label for-"email'»Email:«/label» 
«input type-"email" id-"email" 
— name-"email" class-"large" /> 
</li> 
<li> 
«label for="web_site">Web:</label> 
«input type-"url" id="web_site" 
— namez"web site" class-"large" /> 
«p class-"instructions'»Have a homepage or 
a blog? Put the address here.«/p» 
</li> 
<li> 
<label for="phone">Phone:</label> 
«input type-"tel" id="phone" 
— namez"phone" placeholder- 
— "XXX-XXX-XXxx". class-"large" 
> pattern="\d{3}-\d{3}-\d{4}" /> 
</li> 

















16.7.4 type 属性 可 以 识别 电子 邮件 框 、URL 
框 和 电话 框 。pattern 属性 用 于 定制 的 验证 规则 。 
它 使 用 正则 表达 式 对 用 户 在 框 中 输入 的 内 容 进行 限 
制 。 不 必 对 那些 不 同 寻常 的 正则 表达 式 语 法 感到 担 
心 ， 可 以 在 http;//html5pattern.com 找到 一 些 常用 的 
正则 表达 式 


























— 




















正则 表达 式 超出 了 本 书 的 范围 , 不 过 ， 
网 上 有 很 多 查找 模式 "的 资源 。 要 确保 向 用 户 
清楚 地 说 明 他 们 需要 遵循 的 模式 。 如 果 你 不 
仔细 ， 访 问 者 就 有 可 能 放弃 提交 表单 ， 并 且 
一 去 不 复 返 。 不 要 让 这 种 事情 发 生 ! 


16.8 为 表单 组 件 添加 标签 
HTML 提供 了 对 标签 进行 标记 的 方法 ， 


这 样 就 可 以 将 它们 与 相关 联 的 元 素 正 式 地 连 
接 起 来 ， 还 可 以 用 于 编写 脚本 和 其 他 目的 。 

















XXX-XXXX 的 格式 。 同 时 ， 这 种 字段 对 于 使 用 
iOS 上 的 Safari 的 用 户 来 说 也 很 方便 ， 因 为 它 会 启 
动 数字 键盘 而 非常 见 的 标准 键盘 















































目前 ， 你 已 经 在 一 些 例子 中 看 到 了 带 for 
性 的 label 元 素 ， 用 于 对 每 个 表单 元 素 提 供 解 
释 性 信息 。 


38] 





D 模式 指 的 是 用 于 描述 一 系列 用 于 匹配 规则 的 字符 串 ( 表达 式 ) 一 一 译 者 注 
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例如 ， 在 访问 者 应 该 输入 其 姓名 中 的 名 
的 文本 字段 之 前 ， 可 能 有 “First Name:” 的 
字样 ， 如 图 16.8.1 所 示 。 





<fieldset> 
<h2 class="account">Account</h2> 
<ul> 
<li> 
<label for="first_name">First 
— Name:</label> 
<input type="text" id="first_ 
— name" name="first_name" 
> class-"large" /» 
</li> 
<li> 
<label for-"last name"»Last Name: 
> «/label» 
«input type="text" id-"last 
— name" name-"last name" 
> class-"large"/» 
</li> 
</ul> 
</fieldset> 














图 16.8.1 “以 正式 的 方式 对 标签 进行 标记 提供 了 一 
种 在 样式 表 中 识别 它们 的 简单 方法 。 如 果 在 label 
中 使 用 for 属性 ， 该 属性 的 值 应 该 与 对 应 表单 元 素 
的 id 属性 值 相同 


有 时 , placeholder 被 错误 地 用 做 了 label, 
应 该 只 在 需要 提供 提示 信息 的 情况 下 使 用 
placeholder, 



































为 表单 组 件 添加 正式 标签 的 步骤 

(1) 输入 «label, 

(2) 如 果 需 要 ， 输 入 for-"idname"», ix Hi 
的 idname 是 对 应 表单 元 素 的 id 属性 值 。 

(3) 输入 标签 的 内 容 。 

(4) 输入 «/label», 


EED 如 果 使 用 for 属性， 就 必须 同时 在 相 
关联 的 form 元 素 的 开始 标记 中 添加 id 属性 ， 
才能 使 for 属性 生效 ( 否则 ,文档 无 法 通过 
验证 ) 。 





如 果 省 略 for 属性 ， 那 么 对 于 需要 添 
加 标签 的 元 素 ，id 属性 并 不 是 必需 的 。 在 这 
种 情况 下 ， 标 签 和 该 元 素 之 间 是 通过 邻近 原 
则 (如 位 于 同一 个 1 元 素 ) 联系 在 一 起 的 。 


另 一 种 添加 标签 的 技术 是 使 用 titjle 属 
性 。 更 多 信息 参见 3.16 节 。 另 外 ，placeholder 
属性 无 法 完全 替代 标签 。 


可 以 使 用 CSS 对 标签 添加 格式 ， 如 
图 16.8.2 和 图 16.8.3 所 示 。 





label { 
display: inline-block; 
padding: 3px 6px; 
text-align: right; 
width: 150px; 
vertical-align: top; 








} 


图 16.8.2 ”为 字段 的 标签 添加 样式 可 以 让 表单 变 得 
更 为 美观 和 用 户 友好 














ooo Creating a Form 
Jc Creating a Form o— 1 
4 » (e) Go to a Web Site P v IGE GooQ) Le) 

















Gender: © Male © Female 


EMAILS 


© Itis okay to email me with messages from othe 
LJ Itis okay to email me with occasional promotior 
products. 


Create Account 


Eu ——— —— ———— | 
16.8.8 ”对 于 单 选 按钮 和 复 选 框 的 标签 ， 用 户 不 
仅 可 以 通过 点 击 表单 元 素 改变 其 状态 ， 还 可 以 通过 
点 击 标签 改变 表单 元 素 的 状态 
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16.9 创建 单 选 按钮 


还 记得 老式 汽车 收音 机 上 那些 大 大 的 
黑色 塑料 按钮 吗 ? 按 下 其 中 的 一 个 可 以 收听 
WFCR; 按 下 男 一 个 可 以 收听 WRNX。 不 过 ， 
不 可 以 同时 按 下 两 个 按钮 。 单 选 按 钮 也 遵循 
同样 的 工作 方式 C 只 是 它们 的 用 途 不 是 听 收 
音 机 ), 如 图 16.9.1、 图 16.9.2 和 图 16.9.3 所 示 。 








创建 单 选 按钮 的 步骤 

(1) 如 果 需 要 ,输入 单 选 按钮 的 介绍 文本 。 
例如 ， 可 以 使 用 “选择 下 列 选 项 中 的 一 个 ”。 

(2) fij, A «input type="radio", 

(3) 输入 name="radioset", 这 里 的 radioset 
用 于 识别 发 送 至 脚本 的 数据 ， 同 时 用 于 将 多 
个 单 选 按钮 联系 在 一 起 ， 确 保 同 一 组 中 最 多 
只 有 一 个 被 选中 。 

(4) 输入 ide"id", xx HBS id 用 于 让 对 应 
的 标签 识别 该 单 选 按钮 。 同 一 组 单 选 按钮 的 
name 值 都 是 相同 的 ， 但 同一 页 面 中 每 个 元 素 
的 id 必须 是 唯一 的 。 

(5) 输入 value="data"， 这 里 的 data 是 该 
单 选 按钮 被 选中 (无论 是 被 默认 选中 还 是 被 
访问 者 选中 ) 时 要 发 送 给 服务 器 的 文本 〈 如 
图 16.9.3 所 示 ) o 

(6) 如 果 需 要 ， 输 入 checked-"checked" i]: 
该 单 选 按钮 在 页 面 打开 时 默认 处 于 激活 状态 。 
在 一 组 单 选 按钮 中 ， 只 能 对 一 个 按钮 添加 这 一 
属性 。( 在 HTML 中 ，="checked" 是 可 选 的 。) 

(7) 输入 />。 

(8) 输入 «label for="id">radio label«/ 
label», KB, id 与 单 选 按钮 中 的 id 值 相同 ， 
radio label 则 用 于 让 访问 者 识别 该 单 选 按钮 。 
radio label 的 值 通常 与 value 的 值 相 同 ， 但 
这 并 不 是 必需 的 。 

(9) 对 同一 组 内 的 所 有 单 选 按钮 ， 重 复 第 
(2) 步 至 第 (8) 步 。 





















































«fieldset class-"radios"» 
«ul» 
di» 
«input type-"radio" id-"gender male" 
> name-"gender" value-"male" /> 
«label for-"gender male"»Male«/label» 
</li> 
<li> 
<input type="radio" id="gender_ 
> female" name="gender" value= 
> "female" /> 
<label for="gender_female">Female 
> </label> 
</li> 
</ul> 
</fieldset> 














16.9.1 ”对 于 单 选 按钮 ，name 属性 有 双重 功能 : 
将 同一 组 的 单 选 按 钮 联系 在 一 起 ， 并 在 将 值 发 送 至 
脚本 时 对 其 进行 识别 。value 是 很 重要 的 ， 因 为 对 
于 单 选 按 钮 访问 者 无 法 输入 值 
































.radios { 
background: none; 
display: inline; 
margin: 0; 
padding: 0; 

} 


.radios ul { 
border: none; 
display: inline-block; 
list-style: none; 
margin: 0; 
padding: 0; 

} 


.radios li { 

margin: 0; 

display: inline-block; 
} 


.radios label { 
margin-right: 25px; 
width: auto; 


} 


.radios input { 
margin-top: 3px; 














16.9.2 3X Bt CSS 可 以 让 无 序列 表 中 的 项 目 水 平 
排列 。 标 签 拥 有 25 像素 的 右 侧 外 边 距 ， 从 而 对 不 同 
的 单 选 按 钮 ( 及 标签 ) 进行 分 隔 ( 如 图 16.9.3 所 示 ) 
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Gender: © Male J Female 




















16.9.3” 单 选 按钮 本 身 是 用 input 元 素 创建 的 ; 
标签 (Male 和 Female ) 是 用 label 元 素 创 建 的 。 点 
击 标签 会 选中 对 应 的 单 选 按钮 











如 果 不 设置 vaJue 属性 ， 就 会 向 脚本 
发 送 on。 这 并 不 是 特别 有 用 ， 因 为 你 无 法 判 
断 哪个 按钮 是 被 选中 的 。 


16.10 ”创建 选择 框 


选择 框 非常 适合 向 访问 者 提供 一 组 选项 ， 
从 而 允许 他 们 从 中 选取 。 它 们 通常 呈现 为 下 
拉 菜 单 的 样式 。 如 果 允 许 用 户 选 择 多 个 选项 ， 
选择 框 就 会 呈现 为 一 个 带 滚动 条 的 项 目 框 ， 
如 图 16.10.1、 图 16.10.2 和 图 16.10.3 所 示 。 





1. 创建 选择 框 的 步骤 

(1) 如 果 需 要 ， 输 入 描述 菜单 的 文本 。 

(2) 输 入 <select。 

(3) 输入 name="1abe1"， 这 里 的 1abel 用 于 
在 收集 的 数据 发 送 至 服务 器 时 对 数据 进行 识别 。 

(4) 输入 id="id1abe1"， 这 里 的 idlabel 
是 用 于 让 对 应 的 标签 和 JavaScript 识别 输入 字 
段 的 文本 。 

(5) 如 果 需 要 ， 输 入 size-"n", 
代表 选择 框 的 高 度 ( 以 行为 单位 ) 。 

(6) 如 果 需 要 , 输入 multiple="multiple"， 
从 而 允许 访问 者 选择 一 个 以 上 的 菜单 选项 ( 选 
择 的 时 候 需 按 住 Control 键 或 Command 键 ) 。 


这 里 的 7 





(7) 输 入 >。 

(8) 输入 <option。 

(9) 如 果 需 要 , 输入 selected-"selected", 
指定 该 选项 被 默认 选中 。 

(10) 输入 value="1abe1"， 这 里 的 label 
用 于 在 该 选项 被 选中 时 对 将 要 发 送 至 服务 器 
的 数据 进行 识别 。 

(11) 如 果 需 要 ,输入 label-"menu option", 
这 里 的 menu option 是 应 该 出 现在 菜单 里 的 选 
项 文字 。 

(12) 输入 >。 

(13) 输入 希望 出 现在 菜单 中 的 选项 名 称 。 

(14) 输入 </option>。 

(15) 对 每 个 选项 重复 第 (8) 步 至 第 (14) 步 。 

(16) 输入 </select>。 

如 果 有 一 个 选项 很 多 的 特别 大 的 荣 单 ， 可 能 
需要 对 这 些 选 项 进行 分 组 ,分 别 放 入 不 同 的 类 别 。 








2. 对 选择 框 选项 进行 分 组 

(1) 根据 “创建 选择 框 的 步 又 ”， 创 建 所 
需 的 选择 框 。 

(D) 在 希望 放 在 同一 子 荣 单 中 的 第 一 组 选项 
中 的 第 一 个 option 元 素 之 前 ， 输 入 <optgroup。 

(3) 输入 label-"submenutitle"», ix HA 
submenutitle 是 子 菜单 的 标题 C 如 图 16.10.4 
和 图 16.10.5 所 示 ) o 

(4) 在 该 组 的 最 后 一 个 option 元 素 之 后 ， 
输入 </optgroup>。 

(5) 对 每 个 子 菜单 重复 第 (2) 步 至 第 (4) 步 。 








«label for="state">State:</label> 

«select id="state" name="state"> 
«option value-"AL'»Alabama«/option» 
«option value-"AK"»Alaska«/option» 








«/select» 








16.10.1 选择 框 由 两 种 HTML 元 素 构成 : select 
和 option。 通常 ， 在 select 元 素 里 设置 name 属性 ， 
在 每 个 option 元 素 里 设置 value 属性 
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select ( 
font-size: 10096; 
} 


16.10.2 ”我 们 再 次 使 用 CSS 对 字体 大 小 进行 调 
整 。 可 以 使 用 CSS 对 width, color 和 其 他 的 属性 
进行 调整 ， 不过， 不 同 的 浏览 器 呈现 下 拉 菜 单列 表 
的 方式 略 有 差异 









































Creating a Form 











City: į 


State: 


Alabama 





ZIP Code: Alaska 
California 











16.10.3 ”除非 设置 了 size 属性 ， 否 则 访问 者 
就 必须 选择 菜单 中 的 某 个 选项 。 默 认 的 选择 是 菜 
单 中 的 第 一 个 选项 ， 或 者 是 在 HIML 中 指定 了 
selected 的 选项 











«label for-"referral'»Where did you find out 
— about usX«/label» 
«select id-"referral" name-"referral"» 
«optgroup label-"On-line"» 
«option value-"social network"»Social 
—> Network«/option» 
«option value-"search engine"»Search 
—> Engine«/option» 
«/optgroup» 
«optgroup label-"Off-line"» 
«option value-"postcard"»Postcard 
> «/option» 
«option value-"word of mouth"»Word of 
— Mouth«/option» 
«/optgroup» 
</select> 











16.10.4 每 个 子 菜单 都 有 一 个 标题 (在 optgroup 
开始 标记 的 label 属性 中 指定 ) 和 一 系列 选项 (使 
用 option 元 素 和 常规 文本 定义 ) 





ceapa a Form with an a 














Where did you find | Social Network +$ 


out about us? 
Social Network 


Search Engine 
Post Card 
Person 


D -————— —— 


图 16.10.5 浏览 需 通 常 不 会 创建 真正 的 子 菜 单 ， 
而 是 对 菜单 项 目 进行 分 组 显示 























如 果 添 加 了 size 属性 ， 那 么 选择 框 
看 起 来 会 更 像 一 个 列表 ， 且 没有 自动 选中 的 
选项 ( 除非 设置 了 selected ) 。 


Je size 大 于 选项 的 数量 ,访问 者 
就 可 以 通过 点 击 空白 区 域 让 所 有 的 选项 处 于 
未 选中 状态 。 


16.11 创建 复 选 框 


在 一 组 单 选 按钮 中 ， 只 人 允许 选择 一 个 答 
案 ; 但 在 一 组 复 选 按钮 中 ， 访 问 者 可 以 选择 
任意 数量 的 答案 。 同 单 选 按钮 一 样 ， 复 选 杠 
也 与 name 属性 的 值 联系 在 一 起 。 


创建 复 选 框 的 步骤 

(1) 如 果 需 要 ， 输 入 复 选 框 的 介绍 文本 。 
例如 ， 可 以 使 用 “选择 一 个 或 多 个 选项 ”。 

(2) 输入 «input type="checkbox", 

(3) 输入 name="boxset"， 这 里 的 boxset 
用 于 识别 发 送 至 脚本 的 数据 ， 同 时 用 于 将 多 
个 复 选 框 联 系 在 一 起 。 

(4) 输入 value="data"， 这 里 的 data 是 该 
复 选 框 被 选中 (无论 是 被 访问 者 选中 还 是 被 
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建站 者 选中 ， 如 图 16.11.1 所 示 ) 时 要 发 送 给 
服务 器 的 文本 。 

(5) 输入 checked="checked" 让 该 复 选 框 
在 页 面 打 开 时 默认 处 于 选中 状态 ， 建 站 者 或 
访问 者 可 能 会 勾 选 默认 的 选项 。( 在 HIML 中 ， 
-"checked" 是 可 选 的 。 ) 

(6) 输入 /> 以 结束 复 选 框 。 

(7) 输入 <labpel for-"id"» checkbox label 
«labeli, Hb, id 与 复 选 框 元 素 中 的 2 值 
TH[H], checkbox label 则 用 于 让 访问 者 识别 
该 复 选 框 。checkbox label 的 值 通常 与 value 
的 值 相同 ， 但 这 并 不 是 必需 的 。 

(8) 对 同一 组 内 的 所 有 复 选 框 ,重复 第 (2) 
步 至 第 (7) 步 。 


Hil 






































«ul class-"checkboxes"» 
di» 
«input type="checkbox" id-"email . 
— ok msg from users" name-"email 
> signup[]" valuez"user emails" 
/» 
«label for-"email ok msg from users"» 
>It is okay to email me with 
— messages from other users.«/label» 
</li> 
<li> 
<input type="checkbox" 
— id="email_ok_occasional_ 
—> updates" name="email signup[]" 
— value-"occasional updates" /> 
«label for-"email ok occasional 
— updates"»It is okay to email me 
— with occasional promotions about 
— our other products.«/label» 
</li> 
</ul> 











16.11.1 注意 ,标签 文本 (未 突出 显示 ) 不 需 





.checkboxes label { 
text-align: left; 
width: 475px; 

) 


























图 16.11.2 对 于 复 选 框 ， 通常 需要 为 标签 设置 不 
同 的 样式 ， 因 为 这 些 标签 位 于 输入 元 素 之 后 











4 e Wet Pr qx 
Gender: Male ) Female 


It is okay to email me with messages from other users. 
! Itis okay to email me with occasional promotions about our other 
products. 


Create Account 











图 16.11.3 访问 者 可 以 根据 需要 选择 任意 数量 的 
框 ， 每 个 框 对 应 的 值 及 复 选 框 组 的 名 称 都 会 被 发 送 
到 脚本 











如 果 使 用 PHP， 在 图 16.11.1 中 使 用 
name-"boxset[ ]"( 这 里 的 boxset 用 于 标识 发 
送 给 脚本 的 数据 ) 就 会 自动 地 创建 一 个 包含 
复 选 框 值 的 数组 ( 名 为 $ POST['boxset']) 。 


16.12 创建 文本 区 域 


如 果 和 希望 给 访问 者 填写 问题 或 评论 的 
空间 ， 可 以 使 用 文本 区 域 。 它 们 可 以 根据 
需要 进行 扩展 ， 如 图 16.12.1、 图 16.12.2 和 
图 16.12.3 所 示 。 














要 与 value 属性 一 致 。 这 是 因为 标签 文本 用 于 在 浏 
览 器 中 辐 访问 者 标识 复 选 枉 ， 而 value 则 用 于 向 脚 
本 标识 数据 。 空 的 方 括号 是 为 PHP 脚本 准备 的 ( 参 
见 提 示 ) 

为 复 选 框 的 标签 设置 样式 ， 如 图 16.11.2 
和 图 16.11.3 所 示 。 



































«label for-"bio"»Bio:«/label» 
«textarea id-"bio" name-"bio" rows-"8" 
> colsz"50" class-"large"»«/textarea» 














16.12.1 textarea 元 素 中 没有 value Jg JE, ER 
认 值 是 通过 在 开始 标记 和 结束 标记 之 间 添 加 文本 进 
行 设 置 的 
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textarea ( font: inherit; width: 250px; ) 














16.12.2 ”在 默认 情况 下 ， 对 于 textarea, font 
属性 不 会 继承 ， 因 此 必须 显 式 地 设置 该 属性 
































Creating a Form 
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Creating a Form 





Screen Name: 





Web: 


Have a homepage or a blog? Put the address here. 





Bio: |My name is Rose. 











x 


图 16.12.3 访问 者 可 以 在 框 中 输入 很 多 行文 本 








创建 文本 区 域 的 步骤 

(1) 如 果 需 要 ， 输 入 用 于 标识 文本 区 域 的 
解释 性 文本 。 

(2) 输入 <textarea。 

(3) 输入 name="1abe1"， 这 里 的 1abel 是 
用 于 让 服务 器 ( 和 脚本 ) 识 别 输入 数据 的 文本 。 

(4) 如 果 需 要 ， 输 入 maxlength="n"， 
这 里 的 是 可 以 输入 的 最 大 字符 数 。 对 于 
textarea 来 说 ， 这 个 属性 是 HTML5 新 增 
的 ， 因 此 它 在 不 同 浏览 器 中 的 表现 并 不 一 
致 ， 参 UL http//wufoo.com/html5/attributes/03- 
maxlength. html。 

(5) 输入 rowsz"n", iX HW] n 是 文本 区 域 
的 高 度 〈 以 行为 单位 ) 。 

(6) 输入 cols-"n", iX HIE] n 是 文本 区 域 
的 宽度 ( 以 字符 为 单位 ) 。 

(7) 输入 >。 




















(8) 输入 文本 区 域 的 默认 文本 ( 如 果 有 
的 话 ) o 
(9) 输入 «/textarea» 以 完成 文本 区 域 。 


开国 ”对 于 文本 区 域 ,， 不 需要 使 用 value 属 
性 。 替 代 value 属性 的 是 出 现在 textarea 开 
始 标记 和 结束 标记 之 间 的 文本 。 


访问 者 在 一 个 文本 区 域 中 最 多 可 以 输 
入 327 00 个 字符 。 必 要 的 时 候 会 出 现 滚动 条 。 


COS 更 好 的 设置 textarea 的 高 度 和 宽度 
的 方式 是 使 用 CSS。 


16.13 ”让 访问 者 上 传 文件 


有 时 需要 让 网 站 的 用 户 向 服务 右上 传 文 
fr (如 照片 、 简 历 等 ) 。 


让 访问 者 上 传 文件 的 步骤 

(1) 输 A «form method="post" enctype 
-"multipart/form-data", enctype 属性 可 以 
确保 文件 采用 正确 的 格式 上 传 ， 如 图 16.13.1 
Biz o 

(2) 接 下 来 ,输入 action-"upload.url"», 
其 中 的 upload.url 是 处 理 上 传 文件 的 脚本 的 
URL。 为 此 可 能 需要 一 段 专 门 的 脚本 。 

(3) 为 文件 上 传 区 域 输入 标签 ， 如 <label 
for-"picture"»Picture:«/label», 

(4) 输入 «input type="file"， 创 建 一 个 文 
件 上 传 框 和 一 个 Browse (浏览 ) 按钮 ， 如 图 
16.13.2 所 示 。 

(5) 输入 namez"title", XE H title 用 
于 识别 将 要 上 传 的 文件 。 

(6) 输入 id="Jabe1"， 这 里 的 label 用 于 
让 对 应 的 标签 识别 这 个 表单 元 素 ， 它 在 此 页 
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面 上 必须 是 唯一 的 。 

(7) 如 果 需 要 ， 输 入 size="n"， 这 里 的 1n 
是 访问 者 可 以 输入 路 径 和 文件 名 的 字段 的 宽 
度 。 也 可 以 使 用 CSS 设置 宽度 。 

(8) 输入 />。 

(9) 跟 平常 一 样 结束 表单 ， 包 括 创建 提交 
TER, "A «/form» 结束 标记 。 














<form method="post" action="showform.php" 
— enctype-"multipart/form-data"» 


«label for-"picture"»Picture:«/label» 

«input type-"file" id-"picture" name- 
— "picture" /> 

«p class-"instructions"»Maximum size of 700k. 
— JPG, GIF, PNG.«/p» 


</form> 











16.13.1 要 让 访问 者 能 够 上 传 文件 ， 必 须 正 确 
地 设置 enctype 属性 ， 创 建 input type-"file" 元 素 














Creating a Form 
btl Z 


Creating a Form 





4 »jjel[3Getawebste — 








pev | (387 Google Q) | f 
PUBLIC PROFILE 
Picture: | Browse... | 


Maximum size of 700k. JPG, GIF, PNG. 


Screen Name: 





Web: 


Have a homepage or a blog? Put the address here. 








x 





























16.13.2 ”文件 上 传 区 域 为 用 户 提供 了 从 其 系统 
中 选择 文件 的 方式 

对 于 需要 允许 上 传 的 表单 ， 不 能 使 用 
get 方法 。 

6 国 国 服务 器 在 接收 文件 之 前 ， 需 要 进行 正 


确 地 配置 以 存储 文件 。 


16.14 创建 隐藏 字段 


隐藏 字段 可 以 用 于 存储 表单 中 的 数据 ， 但 
它 不 会 显示 给 访问 者 。 可 以 认为 它们 是 不 可 见 
的 文本 框 。 它 们 通常 用 于 存储 先前 的 表单 收集 
的 信息 ， 以 便 将 这 些 信息 同 当前 表单 的 数据 一 
起 交 给 脚本 进行 处 理 ， 如 图 16.14.1 所 示 。 

















«form method-"post" action-"whatever.php"» 
«input type-"hidden" name-"name" value- 
一 "<?= $name ?»" /> 

<input type="submit" value-"submit data" /» 

















图 16.14.41. 创建 隐藏 字段 时 ， 可 以 使 用 脚本 中 的 
变量 将 字段 的 值 设置 为 访问 者 原来 输入 的 值 





创建 隐藏 字段 的 步骤 

(1) 输入 <input type="hidden", 

(2) 输入 name="1abe1"， 这 里 的 1abel 是 
对 要 存储 的 信息 的 简短 描述 。 

(3) 输入 value="data"， 这 里 的 data 是 要 
存储 的 信息 本 身 。 它 通常 是 表单 处 理 脚本 中 
的 一 个 变量 (参见 图 16.14.1) 。 

(4) 输入 />。 











什么 时 候 使 用 隐藏 字段 

假设 你 有 一 个 表单 ， 希 望 让 访问 者 在 
提交 表单 之 前 有 机 会 检查 他 们 输入 的 内 容 。 
处 理 表 单 的 脚本 可 以 向 访问 者 显示 提交 的 
数据 ， 同 时 创建 一 个 表单 ， 其 中 有 包含 同 
样 数据 的 隐藏 字段 。 如 果 访 问 者 希望 编辑 
数据 ， 他 们 只 需 后 退 就 可 以 了 。 如 果 他 们 
想 提交 表单 ， 由 于 隐藏 字段 已 经 将 数据 填 
好 了 , 因此 他 们 就 不 需要 再 次 输入 数据 了 。 


CES 隐藏 字段 出 现在 表单 标记 中 的 位 置 并 不 
重要 ， 因 为 它们 在 浏览 器 中 是 不 可 见 的 。 只 要 它 
们 位 于 表单 的 开始 标记 和 结束 标记 之 间 即 可 。 
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如 果 要 创建 一 个 在 访问 者 点 击 提交 按 
钮 时 与 其 他 数据 一 起 提交 的 元 素 ， 同 时 希望 
访问 者 可 以 看 到 它 ， 那 么 可 以 创建 一 个 常规 
的 表单 元 素 并 使 用 readonly ( 只 读 ) 属性 。 


16.15 创建 提交 按钮 


访问 者 输入 的 信息 如 果 不 发 送 到 服务 器 ， 
就 没什么 用 。 应 该 总 是 为 表单 创建 提交 按钮 ， 
证 访问 者 可 以 将 信息 交 给 你 ， 如 图 16.151, B 
16.15.2 和 图 16.15.3 所 示 。 ( 还 可 以 使 用 图 像 提 
交 表 单数 据 , 参见 “创建 带 图 像 的 提交 按钮 ”。) 
































«input type-"submit" class="create profile" 
— value-"Create Account" 














图 16.15.1 如果 不 填写 name 属性 ， 则 提交 按钮 的 
cm 值 对 就 不 会 传 给 脚本 。 由 于 通常 不 需要 这 一 信 
息 ， 因 此 上 面 的 做 法 是 有 益 的 
































.Create profile { 
background-color: #DA820A; 
border: none; 
border-radius: 4px; 
box-shadow: 2px 2px 2px #333; 
cursor: pointer; 
color: #fff; 
margin: 12px; 
padding: 8px; 
text-shadow: 1px 1px Opx #CCC; 

} 


16.15.2 通过 使 用 类 ， 我 为 提交 按钮 应 用 了 
字体 格式 和 一 些 CSS3 特性 
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1. 创建 提交 按钮 的 步骤 

(1) 输入 <input type="submit", 

@Q) 如 果 需 要 ,输入 value="submit message", 
这 里 的 submit message 是 将 要 出 现在 按钮 上 
的 文本 。 

(3) 最 后 输入 />。 








Creating a Form 
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HE Creating a Form 





J Itis okay to email me with o 
products. 


Create Account 


Miian] 
图 16.15.3 ”提交 按钮 可 以 激活 表单 收集 的 数据 。 
可 以 通过 value 属性 定制 按钮 的 内 容 ( 对 访问 者 
来 说 ，Create Account ( 创建 账户 ) 比 默认 文本 
Submit Query ( 提交 查询 ) 更 为 明确 ) 






































2. 创建 带 图 像 的 提交 按钮 

(1) 输入 «button type="submit">。 

(2) 输入 将 要 出 现在 按钮 中 图 像 左 侧 的 文 
本 ( 如 果 有 的 话 ) 。 

(3) 输入 <img src="image.ur1"， 其 中 的 
image. url 是 将 要 出 现在 按钮 上 的 图 像 的 名 称 。 

(4) 输入 alt="alternate text", ix HA 
alternate text 是 当 图 像 无 法 显示 时 需要 出 
现 的 文本 。 

(5) 如 果 需 要 ， 添 加 其 他 的 图 像 属性 。 

(0) 输入 /> 以 结束 图 像 。 

(7) 输入 将 要 出 现在 按钮 中 图 像 右 侧 的 文本 
(如 果 有 的 话 ) ， 如 图 16.15.4 和 图 16.15.5 所 示 。 

(8) 输入 </button>。 














«button type="submit" class-"create profile"> 
— Create Account«/button» 














16.15.4 可 以 使 用 button 2522 Gi EE SCHOLA 
图 像 的 提交 按钮 
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~ Create Account 
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E 16.15.5 带 图 像 的 提交 按钮 的 代码 稍微 复杂 一 
些 ， 但 它 可 以 为 创建 元 素 和 为 元 素 添 加 样式 提供 更 
多 的 控制 








CHES 如 果 省 略 value 属性 ， 那 么 提交 按钮 
就 会 显示 默认 的 Submit Query。 


提交 按钮 的 名 一 值 对 仅 在 设置 了 name 
属性 以 后 才 会 发 送 给 脚本 。 因 此 ， 如 果 忽 略 
name 属性 ， 就 不 必 处 理 这 一 额外 的 、 通 常 没 
有 意义 的 提交 数据 。 


如 果 有 多 个 提交 按钮 ， 可 以 为 每 个 按 
钮 设置 name 属性 和 value 属性 ， 从 而 让 脚本 
知道 用 户 按 下 的 是 哪个 按钮 。 


还 可 以 使 用 button 元 素 创建 不 带 图 
像 的 提交 按钮 。 


使 用 HTMLS 的 button 元 素 可 以 创建 
更 漂亮 的 提交 按钮 ， 因 为 它 可 以 包含 其 他 的 
HTML 元 素 ， 而 不 仅仅 是 简单 的 文本 值 。 注 
€, 不 同 的 浏览 器 呈现 它们 的 方式 并 不 一 致 ， 
因此 需要 进行 大 量 的 测试 和 CSS 工作 才能 让 
按钮 在 不 同 的 浏览 器 中 呈现 一 致 的 显示 。 


16.16 ”使 用 图 像 提交 表单 


可 以 仅 使 用 图 像 作为 提交 表单 的 输入 元 
素 。 有 时 ,设计 人 员 创 建 的 按钮 超出 了 CSS3 
的 能 力 ， 哪 怕 使 用 花哨 的 渐变 、 阴 影 和 圆 角 
也 无 法 实现 ， 如 图 16.16.1 和 图 16.16.2 所 示 。 








«input type-"image" alt="Create Account" 
— src-"blue-submit-button.png" /» 



































16.16.1 如 果 使 用 图 像 ， 就 不 需要 再 使 用 提交 
按钮 
Creating a Form 
fe Creating a Form | 十 | ~ 
4.» iG | Go P v | (2 GooQ ) 
= m onay 
products. 


«f CREATE PROFILE 





x 


16.16.24 CSS 无 法 满足 需求 的 时 候 ， 可 以 使 
用 图 像 提交 表单 











使 用 图 像 提 交 表 单 的 步骤 

(1) 创建 PNG、GIF 或 了 PEG 图 像 。 

(2) 输入 «input type-"image", 

(3) 输入 src-" image.url", 这 里 的 image. 
url 是 图 像 在 服务 器 上 的 位 置 。 

(4 输入 alt="description", 这 里 的 descr- 
iption 是 图 像 无 法 显示 时 将 要 出 现 的 内 容 。 

(5) 最 后 ， 输 入 /> 结束 用 于 提交 表单 的 
活动 图 像 的 定义 。 
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16.17 ”禁用 表单 元 素 


在 某 些 情况 下 ,你 可 能 不 想 让 访问 者 
使 用 表单 中 的 某 些 部 分 。 例 如 ， 你 可 能 希望 
在 所 有 必 填 字段 完成 之 前 禁用 提交 按钮 ， 如 
图 16.17.1、 图 16.17.2 和 图 16.17.3 所 示 。 








di» 
«input type-"radio" name-"how" value- 
— "facebook" id-z"facebook" onclicks 
— "document.getElementById('other 
»description').disabled = true;" /> 
«label for-"facebook"»Facebook«/label» 
</li> 
<li> 
<input type="radio" name="how" value= 
— "other" id="other" onclick="document. 
^ getElementById('other description'). 
> disabled = false;" /> 
«label for-"other"»Other«/label» 
</li> 
<li> 
<textarea id="other_description" 
> disabled="disabled"></textarea> 
</li> 























16.17.1 这 里 , 通过 使 用 JavaScript 和 disabled 
属性 ， 让 Other 文本 区 域 仅 在 Other 单 选 按 钮 被 选 
中 时 才能 访问 














Enabling a disabled form element 
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How did you hear about us? 


Advertisement 
D Email Newsletter 
*) Facebook 

) Other 
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图 16.17.2. ^4 Other 单 选 按钮 未 选中 时 ， 文 本 区 
域 是 灰色 的 、 被 禁用 的 ， 用 户 无 法 选中 该 框 并 输入 
内 容 





oeo Enabling a disabled form element 
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How did you hear about us? 
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16.17.3 ”由 于 使 用 了 JavaScript， 当 访问 者 选择 
Other 单 选 按钮 以 后 ， 文 本 区 域 变 成 了 和 白色， 用 户 
可 以 输入 文本 以 提交 到 服务 器 















































禁用 表单 元 素 的 方法 

在 表单 元 素 的 标记 中 输入 disabled= 
"disabled" (或 者 仅 输 入 disabled， 这 两 种 方 
式 都 是 可 行 的 ) 。 


ED 可 以 通过 脚本 修改 已 禁用 表单 元 素 的 
内 容 。 这 需要 一 些 JavaScript 的 知识 。 这 里 使 用 
了 最 简单 的 方法 ， 即 为 单 选 按 钮 添加 onclick= 
"document.getElementById('other descrip- 
tion').disabled = false;"。 这 样 ， 就 可 以 根据 
被 选中 的 单 选 按 钮 对 文本 区 域 进行 禁用 或 启用 。 
这 只 是 一 个 示例 ， 实 际 上 ， 如 图 16.17.1 所 示 的 
那样 将 JavaScript 混在 HIML 中 是 很 不 好 的 。 
合理 的 方法 参见 Christian Heilmann 的 文章 ( www. 


onlinetools.org/articles/unobtrusivejavascript/ ) 。 





16.18 HTML5 的 新 特性 和 浏览 
器 支持 情况 
HTMLs 提供 了 一 些 让 创建 和 使 用 表单 变 


得 更 加 容易 的 新 特性 ， 其 中 的 一 些 现在 已 经 
可 以 开始 使 用 了 。 新 的 规范 引入 了 大 量 新 的 
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功能 ， 包 括 新 的 表单 元 素 、 属 性 、 输 入 类 型 、 
验证 处 理 和 样式 。 

还 有 大 量 的 特性 尚未 得 到 广泛 的 支持 ， 
或 者 其 实现 还 不 完整 。 有 些 时 候 ， 连 W3C 的 
规范 都 没有 完成 。 

由 于 旧 的 浏览 器 并 不 支持 这 些 新 特性 ， 
因此 需要 了 解 在 如 今 使 用 这 些 特 性 时 应 该 如 
何 提供 后 备 方案 。 

例如 ，output 就 是 一 种 已 经 获得 广泛 支 














持 的 新 表单 元 素 。 它 用 于 显示 来 自 其 他 表单 
元 素 的 计算 值 。 例 如 ， 如 果 有 一 个 购物 车 ， 
在 修改 希望 购买 的 商品 的 数量 时 ，output 元 
素 会 在 订单 中 显示 更 新 的 总 数 。 该 元 素 通 常 
需要 同 JavaScript 一 起 使 用 。 

新 特性 的 完整 列表 及 各 种 浏览 器 对 它们 
的 支持 情况 见 Wufoo 的 网 站 The Current State 
of HTML5 Forms ( HTMLS 表单 现状 ，http:/ 
wufoo.com/html5/ ) 。 
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见 频 、 音 频 和 其 他 多 媒体 








本 章 内 容 

口 在 网 页 中 添加 单个 视频 

口 为 视频 添加 控件 和 自动 播放 

口 阻止 预 加 载 视 频 

口 添加 具有 备用 超 链接 的 视频 

口 添加 具有 备用 Flash 的 视频 

口 提供 可 访问 性 

口 在 网 页 中 添加 单个 音频 文件 

口 为 音频 添加 控件 、 自 动 播放 并 设置 循 
环 播 放 

口 预 加 载 音频 文件 

口 添加 具有 备用 超 链接 的 音频 

口 添加 具有 备用 Flash 的 音频 

口 添加 同时 具有 备用 Flash 和 超 链 接 的 
音频 

O PxA Flash 动画 

口 通过 Canvas 操作 视频 














万 维 网 变 得 如 此 流行 的 原因 之 一 就 是 可 以 
在 网 页 中 添加 图 像 、 声 首 、 动 画 和 电影 。 虽 然 
过 去 对 这 些 文件 大 小 的 限制 局 限 了 它们 的 作用 ， 
但 是 新 的 技术 C 比如 流 音 频 和 流 视 频 ， 还 有 宽 
带 互 联网 连接 ) 已 经 打开 了 多 媒体 网 页 的 大 门 。 

有 的 多 媒体 网 页 可 以 作为 音频 或 视频 播客 
的 基础 ， 有 的 是 广告 或 交互 显示 ， 还 有 的 网 页 
可 以 利用 少量 的 多 媒体 文件 让 访问 者 获得 更 丰 
富 的 体验 。 本 章 将 介绍 如 何在 网 页 中 插入 多 媒 














体 ， 以 达到 上 述 目 的 以 及 更 多 的 目的 。 

在 HTML5 出 现 之 前 ， 为 网 页 添加 多 媒体 
的 唯一 办 法 就 是 使 用 第 三 方 的 插件 ( 如 Adobe 
Flash Player、 苹 果 的 QuickTime ) 。 通 过 引入 
原生 的 多 媒体 (浏览 器 负责 一 切 )，HTML5 
改变 了 上 述 状况 。 

万 维 网 的 使 用 人 和 群 多 种 多 样 ， 因 此 有 时 
候 要 确保 所 有 的 访问 者 (或 者 说 尽 可 能 多 的 
访问 者 ) 能 看 到 和 听 到 你 提供 的 多 媒体 文件 
是 件 环 手 的 工作 。 你 需要 考虑 查看 或 听 到 这 
些 多 媒体 所 需 的 文件 格式 。 实 际 上 ， 多 媒体 
技术 的 开发 人 员 还 没有 形成 一 致 的 标准 ， 这 
让 事情 变 得 更 复杂 了 一 些 。 

注意 ， 本 章 的 目的 是 介绍 多 媒体 Web X 
F, 重点 放 在 了 所 需 的 HTMLS5 代码 上 。 这 里 
不 会 讲解 如 何 创建 多 媒体 内 容 ， 只 会 讲解 如 
何 让 访问 者 可 以 浏览 它们 。 


17.1 第 三 方 插件 及 步 入 原生 


如 上 文 所 述 , 在 HTML5 出 现 之 前 ， 为 网 
页 添加 媒体 ( 如 音频 和 视频 ) 的 唯一 方法 就 
是 通过 第 三 方 插件 。 

这 些 第 三 方 插件 有 点 像 黑箱 ， 用 户 必须 
真正 安装 了 它们 才能 起 作用 。 如 果 使 用 Flash 
Player 这 样 的 插件 , 用 户 很 有 可 能 已 经 安装 了 ， 
因为 它 的 市 场 份额 很 高 ， 大 多 数 用 户 系统 都 
安装 了 该 插件 。 
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不 过 ， 这 样 做 也 有 一 些 问 题 。 在 某 个 浏 
WASPA Flash 视频 的 代码 在 男 一 个 浏览 器 
中 可 能 不 起 作用 , 也 没有 包围 它 的 优雅 方式 。 
而 且 ， 总 是 存在 速度 方面 的 问题 ， 因 为 浏览 
器 会 将 媒体 内 容 的 播放 完全 交 给 插件 。 

考虑 到 这 些 问题 ，HIMLS 规范 中 添加 了 原 
生 的 多 媒体 。 这 样 做 有 很 多 好 处 : 速度 更 快 ( 任 
何 浏览 器 原生 的 功能 势必 比 插件 要 快 一 些 ) ， 原 
生 控 件 内 置 到 浏览 器 ， 对 搬 件 的 依赖 极 大 地 降低 
(但 也 并 非 完 全 不 依赖 ， 这 在 后 面 将 会 看 到 ) 。 

对 于 任何 一 套 标准 ， 都 有 关于 HTMLS 原 
生 多 媒体 及 其 支持 的 文件 格式 的 问题 。 最 初 ， 
HTMLS 规范 指定 了 两 种 兼容 HIMLS 的 浏览 
器 必须 支持 的 媒体 格式 (分别 对 应 音频 和 视 
频 ) 。 这 本 来 是 很 好 的 , 但 并 非 所 有 的 厂商 都 
愿意 遵循 。 庄 基 亚 和 苹果 均 未 选择 使 用 这 些 强 
制 的 媒体 格式 ， 因 此 这 样 的 要 求 在 规范 中 被 移 
除了 。 这 意味 着 你 需要 为 你 的 媒体 提供 一 种 以 
上 的 格式 才能 让 它 在 兼容 HTMLS HIWI 98 as rp 
播放 。 后 面 我 们 将 详细 地 讨论 这 些 问题 。 

当 苹 果 宣 布 不 再 在 其 移动 设备 ( 包括 
iPhone I iPad) 上 支持 Flash 时 ，HTMLS 及 
原生 媒体 就 变 得 更 为 实用 了 。 随 着 这 些 设备 
的 日 渐 普 及 ， 过 去 播放 媒体 文件 对 Flash 的 依 
赖 正在 迅速 削减 ， 因 此 迫切 需要 一 种 新 的 解 
决 方案 。 于 是 ，HTML5 原生 多 媒体 进入 了 这 
一 领域 并 展现 出 了 强大 的 力量 ， 因 为 苹果 移 
动 设备 的 浏览 器 是 支持 HIMLS 的 。 


















































闲话 少 叙 ， 下 面 就 来 看 看 如 何 为 网 页 添 
加 原生 的 视频 。 


17.2 ”视频 文件 格式 


HTMLS 支持 大 量 不 同 的 视频 文件 格式 
( 即 编 解码 器 ) 。 

HTMLS 支持 三 种 主要 的 视频 编 解 码 需 。 
以 下 是 这 三 种 编 解码 器 及 支持 它们 的 浏览 需 。 

















口 Ogg Theora 使 用 的 文件 扩展 名 为 .ogg 
S.ogv, SREE MNI V ds E15 Firefox 
3.5. Chrome 5+ 和 Opera 10.5. 

Q MP4 (H.264) 使 用 的 文件 扩展 名 为 
mp4 Ek .m4v, X FFE BJ Was 
括 Safari 3+, Chrome 5-?, Internet 
Explorer 9+, iOS 和 Android 2+, 

口 WebM 使 用 的 文件 扩展 名 为 webm, 
文 持 它 的 浏览 器 包括 Firefox 4+、 
Chrome 6+, Opera 11+, 
Explorer 9+ 和 Android 2.3+。 





Internet 





开发 者 至 少 需 要 为 视频 提供 两 种 格式 
(MP4 fe WebM ) ， 才 能 确保 获得 所 有 兼容 
HTMLS 的 浏览 器 的 支持 。 这 并 不 是 很 糟糕 。 


Google 将 在 即将 发 布 的 Chome 中 放弃 
对 MP4 的 支持 , 不 过 他 们 还 没有 确认 这 一 点 。 


什么 是 编 解 码 器 

编 解 码 器 是 使 用 压缩 算法 对 数据 的 数 
字 流 进行 编码 和 解码 ， 使 之 更 适合 播放 的 
计算 机 程序 。 

编 解码 器 的 目标 通常 是 在 保证 音频 和 视频 
所 能 达到 的 最 高 质量 的 情况 下 减 小 文件 尺寸 。 

当然 ,不 同 编 解 码 器 的 表现 是 不 一 致 的 。 


转换 文件 格式 

关于 如 何 创建 视频 资源 的 主题 已 经 超 
出 了 本 章 的 范围 ， 不 过 如 果 你 已 经 拥有 一 
个 视频 资源 并 希望 将 它 转换 为 其 他 的 文件 
格式 ， 有 大 量 的 工具 可 以 帮 你 完成 这 一 任 
务 。 下 面 就 是 两 个 这 样 的 工具 : 
口 Miro Video Converter ( www.mirov- 
ideoconverter.com ) 
C HandBrake ( http://handbrake.fr ) 
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17.3 在 网 页 中 添加 单个 视频 


要 在 HTMLS 网 页 中 添加 视频 ， 需 要 使 用 
新 的 video 元 素 。 这 一 过 程 再 简单 不 过 了 ， 如 
图 17.3.1 所 示 。 


























<body> 
«video src="paddle-steamer.webm"></video> 
«/body» 











图 17.3.1. 指定 单个 WebM 视频 ( 不 含 控件 ) 


在 网 页 中 添加 单个 视频 的 步骤 

(1) 获取 视频 资源 。 

(2) 输入 <video src-"myVideo. ext"»«/video», 
这 里 的 myVideo. ext 是 视频 文件 的 位 置 、 名 称 
和 扩展 名 。 








就 这 么 简单 ! 


苹果 和 微软 都 采用 了 原生 多 媒体 的 
概念 ， 但 又 对 其 进行 了 修改 。 要 让 原生 多 媒 
体 可 以 在 Safari( 以 及 同样 基于 WebKit 的 
Chrome) 中 运行 ， 用 户 的 设备 上 需要 安装 
QuickTime; Internet Explorer 9 则 需要 安装 
Windows Media Player， 现 实情 况 就 是 这 样 。 


17.4 视频 属性 一 览 


还 有 哪些 属性 可 以 用 在 video 元 素 上 呢 ? 
A 17.1 列 出 了 这 些 属 性 。 
如 你 所 见 ，video 元 素 有 很 多 属性 。 它 们 
为 视频 提供 了 很 高 的 灵活 性 。 









































表 17.1 视频 属性 

m 性 jE 述 
src (W) 指定 视频 文件 的 URL 
autoplay ( 自动 播放 ) 当 视 频 可 以 播放 时 立即 开始 播放 
controls (控件 ) 添加 浏览 器 为 视频 设置 的 默认 控件 
muted ( 静音 ) 证 视频 静音 〈 目前 没有 任何 浏览 器 支持 ) 
loop (循环 ) 让 视频 循环 播放 
poster (海报 ) 间 定 视频 加 载 时 要 显示 的 图 像 〈 而 不 显示 视频 的 第 一 帧 ) 。 接 受 所 需 图 像 文件 的 URL 
width ( 宽度 ) 视频 的 宽度 ( 以 像素 为 单位 ) 
height ( 高度) 视频 的 高 度 ( 以 像素 为 单位 ) 
preload ( 预 加 载 ) 告诉 浏览 器 要 加 载 的 视频 内 容 的 多 少 。 可 以 是 以 下 三 个 值 : 


none 表示 不 加 载 任何 视频 


metadata 表示 仅 加 载 视频 的 元 数据 ( 如 长 度 、 尺 寸 等 ) 





auto 表示 让 浏览 絮 决 定 怎 档 
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目前 仅 向 你 展示 了 在 网 页 中 添加 视频 的 
最 简单 的 方法 ， 而 示例 中 的 视频 甚至 不 会 自 
动 开始 播放 , 因为 我 们 没有 让 它 这 样 做 。 此 外 ， 
如 果 查 看 这 段 示 例 代 码 的 浏览 需 不 支持 所 使 





做 〈 这 是 默认 的 设置 ) 


用 的 视频 文件 格式 ,浏览 器 就 会 显示 一 个 空 的 
EJE ( 如 果 没 有 指定 尺寸 ， 则 为 300 像素 x 
150 像素 ) 或 海报 图 像 ( 如 果 有 的 话 ; 通过 
poster 属性 指定 ) 。 

17.3 节 中 的 代码 示例 并 未 给 视频 添加 任 
何 控件 ， 不 过 要 添加 控件 也 是 相当 容易 的 ， 
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如 图 17.5.1 所 示 。 

















«body» 
«video src-"paddle-steamer.webm" 
— controls-"controls"»«/video» A 
</body> OT a 
y : T A 
p T Soj Ear pA p 00:00 4) 
17.5.4. 添加 单个 WebM 视频 ( 这 次 是 包含 控 ， 
VERS ) 17.5.4 Chrome 中 的 视频 控件 


controls 属性 告诉 浏览 带 为 视频 添加 一 
套 默认 的 控件 。 





布尔 类 型 的 属性 

布尔 类 型 的 属性 (如 controls ) 不 需要 指 
定 值 ， 因 为 它们 出 现在 媒体 元 素 中 就 足够 了 。 

本 书 的 示例 均 为 这 些 布 尔 类 型 的 属性 
指定 了 值 ， 不 过 ， 图 17.5.1 中 的 controls 
也 可 以 写 做 

«video src="paddle-steamer.webm" 

—» controls»«/video». 








每 个 浏览 器 都 有 自己 的 一 套 默 认 控 件 ， 
它们 之 间 看 起 来 差异 很 大 ， 如 图 17.5.2~ 
17.5.6 所 示 。 


ue 
104 
4 


"A 





17.5.6 Internet Explorer 9 中 的 视频 控件 


下 面 的 例子 演示 了 如 何 使 用 表 17.1 中 的 
一 些 视频 属性 ， 如 图 17.5.7 所 示 。 


1. 为 视频 添加 控件 的 方法 


输入 <video src-"myVideo.ext" controls 








-"controls"»«/video», 


2. 为 视频 添加 自动 播放 

(D 获取 视频 资源 。 

(2) 输入 <video src-"myVideo.ext" autoplay 
-"autoplay" controls-"controls"»«/video», 
这 里 的 myVideo. ext 是 视频 文件 的 位 置 、 名 称 
17.5.3 Safari 中 的 视频 控件 和 扩展 名 。 
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«body» 
«video src-"paddle-steamer.webm" 
> autoplaysz"autoplay" controls- 
— "controls"»«/video» 

«/body» 




















17.5.7. 设置 了 加 载 时 自动 播放 的 单个 WebM 
视频 








17.6 为 视频 指定 循环 播放 和 海 
报 图 像 


不 仅 可 以 将 视频 设 为 自动 播放 ， 还 可 以 
将 它 设 为 循环 播放 ， 如 图 17.6.1 所 示 。 (不 
过 这 一 做 法 并 不 推荐 ， 考 虑 一 下 用 户 的 感受 
就 知道 原因 了 。 ) 





«body» 
«video src-"paddle-steamer.webm" 
— autoplay-"autoplay" loop-"loop"» 
— €«/video» 

«/body» 





图 17.6.1 
视频 


要 实现 循环 播放 ， 只 需要 用 到 autoplay 
和 loop 属性 。 

不 过 需要 注意 ,Firefox 并 不 支持 loop 属性 。 

通常 ， 浏 览 需 会 在 视频 加 载 时 显示 视频 
的 第 一 帧 。 你 可 能 想 对 此 作出 修改 ， 指 定 你 
自己 的 图 像 。 这 可 以 通过 海报 图 像 实现 。 


1. 为 视频 添加 自动 播放 和 循环 播放 
(1) 获取 视频 资源 。 
O) 输 入 <video src-"myideo.ext" autoplay-" 


设置 了 自动 播放 和 循环 播放 的 单个 WebM 





autoplay" loop-"loop"»«/video», iX HP myVideo. 
ext 是 视频 文件 的 位 置 、 名 称 和 扩展 名 。 


2. 为 视频 指定 海报 图 像 
(D 获取 视频 资源 。 





(O) 输 入 <video src-"myVideo.ext" controls 
="controls" 
video», HP, myVideo.ext 是 视频 文件 的 
位 置 、 名 称 和 扩展 名 ,myPoster.jpg 是 想 用 
做 海报 图 像 的 图 像 ， 如 图 17.6.2 和 图 17.6.3 
所 示 。 


poster-"myPoster.jpg'»«/ 











«body» 
«video src-"paddle-steamer.webm" 
— poster-"paddle-steamer-poster.jpg" 
— controls-"controls"»«/video» 

«/body» 





17.6.2 ”指定 了 海报 图 像 ( 当 页 面 加 载 并 显示 视 
频 时 显示 该 图 像 ) 的 单个 WebM 视频 ( 含 控件 ) 








17.6.3 ”显示 海报 图 像 的 视频 。 在 这 个 例子 中 ， 
图 像 是 取 自 视频 本 身 的 一 幅 屏幕 截图 





17.7 阻止 预 加 载 视频 


如 果 认 为 用 户 观 看 视频 的 可 能 性 较 低 ( 如 
该 视频 并 不 是 页 面 的 主要 内 容 ) ， 那 么 可 以 
告诉 浏览 器 不 要 预先 加 载 该 视频 ， 这 样 能 节 
省 带宽 ， 如 图 17.7.1 和 图 17.7.2 所 示 。 














«body» 
«video src-"paddle-steamer.webm" 
— preload-"none" controls-"controls"» 
— «/video» 

«/body» 











17.7.1 页 面 完全 加 载 时 也 不 会 加 载 的 单个 WebM 
视频 。 仅 在 用 户 试 着 揪 放 该 视频 时 才 会 加 载 它 
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0:00 
D CD 000 P 











17.7.2 将 preload 设 为 none 的 视频 。 如 你 所 见 ， 
什么 也 不 会 显示 ， 因 为 浏览 器 没有 得 到 关于 该 视频 
的 任何 信息 〈 连 尺寸 都 不 知道 ) ， 也 没有 指定 海报 
图 像 














告诉 浏览 器 不 预先 加 载 视频 的 步骤 

(1) 获取 视频 资源 。 

Q) 输入 <video src-"myVideo.ext" preload-" 
none" controls-"controls"»«/video», 这 Hi 
Hj myVideo.ext 是 视频 文件 的 位 置 、 名 称 和 扩 
展 名 。 


17.8 使 用 多 个 来 源 的 视频 


一 切 看 起 来 都 很 棒 ， 不 过 你 也 应 该 注意 
到 了 ， 前 面 所 有 的 例子 都 只 用 了 一 个 视频 文 
件 〈 同 时 意味 着 只 有 一 种 格式 ) 。 

你 已 经 知道 了 ， 要 获得 所 有 兼容 HTMLS 
的 浏览 器 的 支持 ， 至 少 需 要 提供 两 种 格式 的 
视频 : MP4 和 WebM。 

如 何 做 到 呢 ? 这 时 就 要 用 到 HTML 的 
source 元 素 了 。 

通常 ，source 元 素 用 于 定义 一 个 以 上 的 
媒体 元 素 〈 在 这 个 例子 中 为 video ) 的 来 源 。 

一 个 video 元 素 中 可 以 包含 任意 数量 的 
source 元 素 ， 因 此 为 我 们 的 视频 定义 两 种 不 
同 的 格式 是 相当 容易 的 , 如 图 17.8.1 所 示 。 


指定 两 种 不 同 的 视频 来 源 
(1) 获取 视频 资源 〈 这 次 需要 两 个 ) 。 





























(2) 输入 <video controls-"controls"» JF 
台 video 元 素 〈 含 默认 控件 集 ) 。 

(3) 输入 <source src-"myVideo.mp4" type=" 
video/mp4"», 3x Œ HJ myVideo.mp4 是 MP4 视 
频 源 文件 的 名 称 。 

(4) 输入 <source src-"myVideo.webm" type= 
"video/webm"», 这 Hi 的 myVideo.webm 是 
WebM 视频 源 文件 的 名 称 。 

(5) 输 入 <p>Sorry，your browser doesn't 
support the video element</p>， 从 而 在 浏览 
TAS SCR HTMLS 视频 时 显示 这 条 消息 。 

(6) 输入 </video> 结束 video 元 素 。 








<body> 
«video controls="controls"> 
«source src-"paddle-steamer.mp4" 
> type-" video/mp4"» 
«source src-"paddle-steamer.webm" 
> typez"video/webm"» 
«p»Sorry, your browser doesn't 
— support the video element«/p» 











«/video» 
«/body» 
17.8.1. 这 里 为 视频 定义 了 两 个 源 : 一 个 MP4 





文件 和 一 个 WebM 文件 。 旧 的 浏览 器 则 只 会 显示 p 
元 素 中 的 消息 





17.9 多 个 媒体 源 和 source 元 素 


接 下 来 我 们 将 学 习 source 元 素 的 各 种 可 
用 的 属性 ， 不 过 在 此 之 前 ， 不 妨 先 简单 地 了 
解 一 下 为 同一 媒体 指定 多 个 来 源 的 工作 原理 。 

当 浏 览 器 发 现 video 元 素 时 ， 首 先 会 查 
看 该 元 素 本 身 是 否定 义 了 src。 如 果 没 有 ， 就 
会 检查 srouce 元 素 。 浏 览 髓 会 逐个 查看 这 些 
来 源 ， 直 到 找到 它 可 以 播放 的 一 个 来 源 。 一 
且 找 到 这 样 一 个 ， 就 会 播放 它 并 忽略 其 他 的 
来 源 。 

在 前 一 个 例子 中 ，Safari 会 播放 MP4 文 
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件 并 完全 忽略 WebM 文件 ， 而 Firefox 则 无 法 
播放 MP4 文件 ， 从 而 转向 它 能 播放 的 WebM 
文件 ， 如 图 17.9.1 所 示 。 





17.9.1 所 有 支持 HTMLS5 的 浏览 器 都 能 加 载 该 
视频 ， 因 为 我 们 为 它 指定 WebM 和 MP4 两 种 来 源 

既 不 识别 video 元 素 又 不 识别 source 元 
素 的 浏览 器 〈 即 不 支持 HTMLS 的 浏览 器 ) 在 
解析 文档 时 会 完全 忽略 这 些 标签 ， 它 只 会 显 
示 在 video 元 素 结束 标记 之 前 输入 的 文本 。 

下 面 浏览 一 下 source 元 素 的 属性 (如 
R 17.2 所 示 ) o 














3E 17.2. source 的 属性 
名 称 描 述 
src 视频 来 源 的 URL 
type 用 于 指定 视频 的 类 型 ， 帮 助 浏览 器 决 

















定 它 是 否 能 播放 该 视频 。 如 17.8 节 中 
的 例子 所 示 ， 该 属性 的 值 反映 的 是 视 
频 的 格式 ， 即 编 解 码 器 (如 video/ 


mp4, video/webm, video/ogg) 

media 用 于 为 视频 来 源 指定 CSS3 媒体 查询 ， 
从 而 可 以 为 具有 不 同 屏幕 尺寸 的 设备 
指定 不 同 的 ( 如 更 小 的 ) 视频 






































如 果 在 video 元 素 本 身 的 src 属性 中 
指定 了 值 ， 它 就 会 自动 履 盖 任何 source 元 素 


中 指定 的 来 源 。 


17.10 添加 具有 备用 超 链接 的 
视频 


并 非 所 有 的 浏览 器 都 能 播放 HTMLS 视频 


(如 Internet Explorer 8 及 以 下 的 版 本 ) o X} 
于 这 些 浏览 絮 ， 需 要 提供 后 备 方案 。 

或 许 对 你 来 说 ， 前 一 节 介 绍 的 示例 中 同 
时 使 用 video 和 source 元 素 的 方式 已 经 非常 
理想 了 。 

你 是 对 的 。 

无 法 理解 video 和 source 元 素 的 浏览 器 
会 直接 忽略 它们 ， 可 以 利用 这 一 点 实现 后 备 
方案 。 

在 那个 示例 中 ， 对 于 使 用 不 支持 HTML5 
的 浏览 器 的 用 户 ， 会 显示 一 条 文本 消息 。 可 
以 将 这 条 消息 替换 为 一 个 指向 视频 文件 的 超 
链接 ， 从 而 让 用 户 可 以 下 载 该 文件 并 在 闲暇 
时 观看 该 视频 。 

在 这 个 例子 中 ( 如 图 17.10.1 和 图 17.10.2 
所 示 ) ， 我 选择 包含 一 个 指向 MP4 版 本 视频 
的 下 载 链 接 ， 不 过 提供 指向 WebM 文件 的 链 
接 或 提供 指向 这 两 种 格式 文件 的 链接 同样 也 
很 容易 。 

















<body> 
«video controls="controls"> 

«source src-"paddle-steamer.mp4" 
— type-"video/mp4"» 
«source src-"paddle-steamer.webm" 
— type-"video/webm"» 
«a href-"paddle-steamer.mp4"» 
> Download the video</a> 











«/video» 
«/body» 
17.10.1 为 视频 指定 了 MP4 和 WebM 两 种 来 





源 ， 同 时 ， 在 旧 的 浏览 器 中 将 显示 下 载 该 MP4 文 
件 的 链接 。 











Download the video 





17.10.2 Internet Explorer 8 会 忽略 video 和 source 
元 素 ， 仅 显示 下 载 链接 
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为 视频 添加 备用 超 链接 的 步骤 

(1) 获取 视频 资源 。 

(2) 输入 «video controls-"controls"» Jf 

台 video 元 素 〈 含 默认 控件 集 ) 。 

(3) 输入 <source src-"myVideo.mp4"type- 
"video/mp4"», X HY myVideo.mp4 是 MP4 视 
频 源 文件 的 名 称 。 

(4) 输入 《source src-"myVideo.webm"type- 
"video/webm"» , 3x H1 I) myVideo.webm 是 WebM 
视频 源 文 件 的 名 称 。 

(5) 输入 <a href-"myVideo.mp4" »Download 
the video</a> ( ix Hi [fj myVideo.mp4 是 视频 
源 文件 的 名 称 ) 以 指定 备用 视频 文件 超 链 接 ， 
用 户 可 以 通过 这 个 超 链接 下 载 视频 。 

(6) 输入 </video> 结束 video 元 素 。 


添加 具有 备用 Flash 的 
视频 

除了 可 以 提供 下 载 链 接 作 为 后 备 方案 ， 
还 可 以 (或 许可 以 说 应 该 ) 区 入 一 个 能 播放 
MP4 视频 文件 的 Flash f Ass o 
是 的 ， 尽管 HTML5 和 原生 多 媒体 非常 强 
大 ,但 为 了 照顾 那些 无 法 处 理 这 些 技术 的 旧 
浏览 器 ， 忍 怕 还 得 求助 于 舰 入 Flash 内 容 的 方 
法 。 也 就 是 说 , 如 果 希 望 获得 尽 可 能 多 的 用 户 ， 
至 少 还 有 一 种 选择 ! 

TE, ZEPA H Flash 播放 器 
和 视频 ， 既 可 以 使 用 object 元 素 ， 也 可 以 使 
用 embed 元 素 ， 不 过 这 两 种 方法 都 不 是 严格 有 
AXHJ HTML, 因为 它们 都 没有 出 现在 规范 中 。 

HTMLS 规范 包含 了 embed fll object 元 素 ， 
此 它们 现在 至 少 是 有 效 的 HTML. 

我 们 将 使 用 object 元 素 ， 因 为 该 元 素 提 
供 的 解决 方案 更 完整 一 一 包含 在 object 元 素 
中 的 内 容 都 会 呈现 出 来 ， 哪 怕 浏 览 器 并 不 支 
持 object 元 素 指定 的 插件 。 这 样 就 可 以 指定 
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另外 一 个 后 备 方案 了 (也 应 该 这 样 做 ) ， 即 
后 备 方案 中 的 后 备 方案 。 

此 外 ， 我 推荐 下 载 并 使 用 开源 的 Flash 视 
频 播 放 需 (如 JW Player, Flowplayer 等 ) , 
它们 可 以 让 上 述 能 入 视频 的 过 程 变 得 相当 容 
易 ， 如 图 17.11.1 所 示 。 如 果 播 放 需 能 播放 MP4 
文件 , 就 可 以 对 现 有 的 视频 源 文件 进行 复 用 ， 
这 是 理想 情况 ; 如 果 不 能 播放 MP4 文件 ， 则 
需要 将 视频 转化 为 SWF 或 FLV 文件 。 























«body» 
«video controls-"controls"» 

«source src-"paddle-steamer.mp4" 

» type-"video/mp4"» 

«source src-"paddle-steamer.webm" 

> typez"video/webm"» 

«object type-"application/ 

> X-shockwave-flash" data= 

» "player.swf?videoUrl=paddle- 

> steamer.mp4&controls=true"> 
<param name="movie" value= 
— "player.swf?videoUrl-paddle- 
^ steamer.mp4&controls-true" /> 














</object> 
«/video» 
«/body» 
17.11.14. 不 支持 HTMLS 的 浏览 器 将 转 而 使 用 








备用 Flash 播放 器 ， 播 放 指定 的 MP4 视频 文件 





备用 Flash 播放 器 

上 面 的 代码 片断 中 提 到 的 备用 Flash 播 
放 器 (player.swf ) 包含 在 本 章 可 供 下 载 
的 代码 中 。 这 里 用 的 播放 器 是 相当 出 色 的 
JW Player ( 由 LongTail Video 出 品 ; www. 
longtailvideo.com/players/jw-flv-player ) 。 


1. 为 视频 添加 备用 Flash 的 步骤 

(1) 获取 视频 资源 。 

(2) 输入 <video controls-"controls"» JF 
台 video 元 素 ( 含 默认 控件 集 ) 。 

(3) 输入 《source src-"myVideo.mp4" type= 





314 $13 


视频 、 音 频 和 其 他 多 媒体 








"video/mp4">， 这 里 的 myVideo.mp4 是 MP4 视 
频 源 文件 的 名 称 。 

(4) 输入 «source src-"myVideo.webm"type- 
"video/webm"», ix Hif) myVideo.webm 是 WebM 
视频 源 文 件 的 名 称 。 

(5) 输 入 <object type-"application/x-shoc- 
kwave-flash"data-"player.swf?videoUrl- 
myVideo.mp4&controls-true"»( 这 里 的 myVideo 
-mp4 是 视频 源 文件 的 名 称 ) 以 指定 这 是 一 个 
备用 Flash 播放 器 ， 同 时 指定 要 使 用 的 播放 器 
和 视频 文件 。 注 意 这 里 指定 的 参数 仅 对 本 章 
所 用 的 player. swf 有 效 。 

(6) 输入 <param name-"movie" value-"player. 
Swf?videoUrl-myVideo.mp4&con-trols-true" 
/» C 这 里 的 myVideo.mp4 是 视频 源 文件 的 名 
称 ) ， 从 而 为 不 理解 object 元 素 开始 标记 
中 信息 的 浏览 器 指定 要 使 用 的 播放 器 和 视频 
文件 。 注 意 这 里 指定 的 参数 仅 对 本 章 所 用 的 
player. swf 有 效 。 

(7) fij A. </object> 结束 object 元 素 。 

(8) 输入 </video> 结束 video 元 素 。 


























«body» 
«video controls-"controls"» 
«source src-"paddle-steamer.mp4" 
— type-"video/mp4"» 
«source src-"paddle-steamer.webm" 
— type-"video/webm"» 
«object type-"application/ 
> x-shockwave-flash" data= 
— "player.swf?videoUrl-paddle- 
— steamer.mp4&controls-true"» 
«param name-"movie" value- 
— "player.swf?videoUrl-paddle- 
— steamer.mp4&controls-true" /> 
</object> 
«a href-"paddle-steamer.mp4"» 
> Download the video</a> 
«/video» 
«/body» 











17.11.2 Internet Explorer 8 中 的 备用 Flash 播放 器 

















此 外 ， 还 可 以 在 Flash 对 象 后 面 、video 
元 素 结束 标记 前 面 添加 一 个 视频 文件 下 载 链 
接 (如 前 面 的 示例 那样 ) 。 这 样 就 提供 了 进 
一 步 的 后 备 方案 , 让 用 户 可 以 下 载 视频 文件 ， 
如 图 17.11.2 和 图 17.11.3 所 示 。 不 过 ， 在 不 
支持 HTMLS 视频 的 浏览 器 中 ， 备 用 Flash 播 
放 器 会 与 下 载 链接 一 同 显示 出 来 。 




















F xs 
« b [Tne 7. u ka ^ 


17.11.3 不 支持 HTMLS 视频 的 浏览 器 会 转 而 
使 用 备用 Flash 播放 器 ， 该 播放 器 将 播放 指定 的 
MP4 视频 文件 。 下 载 链接 也 会 显示 出 来 ， 没 有 安 
装 Flash 的 浏览 絮 会 提供 这 种 选择 






































2. 为 视频 添加 备用 Flash 和 超 链接 

(1) 获取 视频 资源 。 

(2) 输入 «video controls-"controls"» Jf 

台 video 元 素 ( 含 默 认 控 件 集 ) 。 

(3) 输入 «source src-"myVideo.mp4" type-" 
video/mp4"», 3x Hi HJ myVideo.mp4 是 MP4 视 
频 源 文件 的 名 称 。 

(4) 输入 <source src-"myVideo.webm" type= 
"video/webm"», 这 里 的 myVideo.webm 是 
WebM 视频 源 文 件 的 名 称 。 

(5) 输入 cobject type-"application/ 
x-shockwave-flash" 











data-"player. 
swf?videoUrl-myVideo.mp4&controls-true"» 

(这 里 的 myVideo. mp4 是 视频 源 文 件 的 名 称 ) 
以 指定 这 是 一 个 备用 Flash 播放 器 ， 同 时 指定 
要 使 用 的 播放 器 和 视频 文件 。 注 意 这 里 指定 
的 参数 仅 对 本 章 所 用 的 player. swf 有 效 。 
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(6) 输入 <param name="movie" value= 
Lax ARUM LP ETE AM mp4&cont- 
rols-true" /» ( xk H HJ myVideo.mp4 是 视频 
源 文件 的 名 称 ) ， 从 而 为 不 理解 object 元 素 
开始 标记 中 信息 的 浏览 器 指定 要 使 用 的 播放 
融和 视频 文件 。 

(7) 输入 </object> 结束 object 元 素 。 

(8) 输入 <a href="myVideo.mp4">Download 
the video</a> ( xXx Œ fj myVideo.mp4 是 视频 
源 文件 的 名 称 ) 以 指定 备用 视频 文件 链接 。 

(9) 输入 </video> 结束 video 元 素 。 

如 果 浏 览 器 支持 HTML5 视频 ， 但 无 


法 找到 它 能 播放 的 文件 ， 它 将 不 会 使 用 备用 
Flash 播放 器 ， 如 图 17.11.4 所 示 。 








17.11.4 Firefox 在 找 不 到 可 播放 的 视频 文件 时 
显示 的 样子 (具有 默认 控件 集 ) 一 一 它 不 会 使 用 备 
用 Flash 播放 器 ， 也 不 会 显示 下 载 链接 












































关于 如 何 制作 每 个 人 都 能 访问 的 视频 ， 

Kroc Camen 提供 了 一 份 很 好 的 材料 , 名 为 “Video 

( http://camendesign.com/code/ 

video for everybody ) 。 此 外 ，Jonathan Neal 提 

供 的 Video for Everybody Generator 也 很 值得 下 载 
( http://sandbox.thewikies.com/vfe-generator/ ) 。 


for Everybody” 


17.12 提供 可 访问 性 


利用 现代 浏览 絮 提 供 的 原生 可 访问 性 支 
TR. 原生 多 媒体 可 以 更 好 地 使 用 键盘 进行 控 








制 ， 这 是 原生 多 媒体 的 另 一 个 好 处 。 

你 应 该 也 会 这 人 么 想 ! 

Opera 是 目前 唯一 的 HTMLS RAUS 
件 集 拥有 键盘 可 访问 性 的 现代 浏览 器 。 对 于 其 
他 的 浏览 器 ， 让 媒体 播放 器 变 得 键盘 可 访 问 的 
唯一 途径 是 创建 你 自己 的 控件 集 。 为 此 ， 需 要 
使 用 JavaScript Media API ( 这 也 是 HTMLS 的 
一 部 分 ) , 不 过 这 已 经 超出 了 本 章 的 讨论 范围 。 

HTMLS 还 指定 了 一 种 新 的 文件 格式 用 于 
包含 文本 字幕 、 标 题 、 描 述 、 篇 章 等 视频 内 容 。 

WebVTT ( Web Video Text Track, Web 
视频 文本 轨道 ) 文件 格式 就 是 用 于 标记 外 部 
文本 轨道 资源 (如 字幕 ) 的 。 目 前 还 没有 浏 
览 器 文 持 这 种 格式 ， 但 已 经 出 现 了 大 量 可 以 
处 理 WebVTT 及 其 功能 的 JavaScript JÆ ( 如 
Playr 和 Captionator ) 。 

关于 WebVTT 和 字幕 的 进一步 讨论 已 经 
超出 了 本 章 的 范围 ， 不 过 更 多 信息 可 以 参见 
www.iandevlin.com/blog/2011/05/html5/webvtt- 


and-video-subtitles ; 


Ian Devlin 的 HTML5 Multimedia: 
Develop and Design ( Peachpit Press, 2011) 
一 书 中 有 专门 演示 如 何 创 建 个 人 的 可 访问 控 
件 集 和 使 用 WebVTT 的 章节 。 




















17.13 添加 音频 文件 格式 


学 会 了 使 用 HTMLS 原生 媒体 在 网 页 中 
添加 视频 之 后 ， 下 面 看 看 如 何 添加 音频 。 同 
HTMLS 视频 一 样 ，HTMLS5 也 支持 大 量 不 同 
的 音频 文件 格式 ( 编 解码 器 ) 。 

可 供 使 用 的 音频 编 解 码 器 主要 有 五 种 。 
以 下 是 这 五 种 编 解码 右 及 支持 它们 的 浏览 右 
O Ogg Vorbis 使 用 的 文件 扩展 名 为 .ogg， 

支持 它 的 浏览 句 包 括 Firefox 3.5+、 
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Chrome 5+ 和 Opera 10.5+。 

O MP3 使 用 的 文件 扩展 名 为 .mp3， 文 
持 它 的 浏览 絮 包 括 Safari 5+、Chrome 
6+, Internet Explorer 9+ 和 iOS; 

O WAV 使 用 的 文件 扩展 名 为 .wav， 文 持 
它 的 浏览 器 包括 Firefox 3.6+、Safari 
5+、Chrome 8+ 和 Opera 10.5+。 

O AAC 使 用 的 文件 扩展 名 为 .aac， 文 
持 它 的 浏览 器 包括 Safari 3+、Internet 
Explorer 9+, iOS 3+ 和 Android 2+。 

口 MP4 使 用 的 文件 扩展 名 为 mp4, x 
持 它 的 浏览 器 包括 Safari 3+, Chrome 
5+, Internet Explorer 9+, iOS 3+ 和 
Android 2+, 

你 应 该 还 记得 ，MP4 是 一 种 视频 编 解码 

器 ， 不 过 它 也 可 以 仅 对 音频 数据 进行 编码 。 


CES 对 于 视频 ， 需 要 使 用 两 种 不 同 的 文件 
格式 才能 确保 获得 所 有 兼容 HTMLS 的 浏览 器 
的 支持 。 对 于 音频 ， 最 好 的 两 种 格式 是 Ogg 
Vorbis 和 MP3, 





在 “转换 文件 格式 ”中 提 到 的 Miro 
Video Converter 应 用 程序 也 可 以 用 来 转化 音频 。 


17.14 在 网 页 中 添加 单个 音频 文 
件 

下 面 开 始 讲解 如 何在 网 页 中 放置 音频 文 

件 。 这 一 过 程 同 添加 视频 的 过 程 是 相似 的 ， 不 

过 这 次 用 到 的 是 audio 元 素 , 如 图 17.14.1 所 示 。 























«body» 
«audio src-"piano.ogg"»«/audio» 
«/body» 
17.14.1 单个 Ogg 编码 的 音频 (不 含 控件 ) 


在 网 页 中 添加 单个 音频 文件 的 步骤 

(1) 获取 音频 文件 。 

(2) 输入 <audio src-"myAudio.ext"»«/ 
audio», iX HI myAudio.ext 是 音频 文件 的 位 
置 、 名 称 和 扩展 名 。 


17.15 ”在 网 页 中 添加 带 控件 的 单 
个 音频 文件 


如 前 面 的 例子 所 示 ， 在 网 页 中 添加 单个 
音频 文件 是 很 容易 的 。 不 过 仅仅 这 样 做 的 话 ， 
什么 也 不 会 显示 ， 因 为 音频 文件 不 可 见 ， 
此 需要 使 用 controls 属性 添加 一 些 控件 ， 如 
图 17.15.1 所 示 。 


























«body» 
«audio src-"piano.ogg" controls- 
— "controls"»«/audio» 

«/body» 











17.15.1. 单个 Ogg 编 码 的 音频 ( 包含 默认 控件 集 ) 

在 网 页 中 添加 带 控件 的 单个 音频 文件 的 
步骤 

(1) 获取 音频 文件 。 

输入 «audio src-"my4udio.ext" controls- 
"controls"»«/audio», 

当然 ， 同 视频 控件 一 样 ， 每 个 浏览 器 都 
有 处 理 控件 外 观 的 独特 方式 ( 如 图 17.15.2 ~ 
17.15.6 所 示 ) o 


p a. 


17.15.2 Firefox 中 的 音频 控件 








17.15.3 ”Safari 中 的 音频 控件 
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00:00 4) 


17.15.4 Chrome 中 的 音频 控件 


0:00/1:22 中 





17.15.5. Opera 中 的 音频 控件 


b 000000 NH 


00:01:23 4) ee 图 








17.15.6 Internet Explorer 9 中 的 音频 控件 





17.46 ”音频 属性 一 览 


同 video 2:28 — E, audio 元 素 也 有 很 多 
可 用 的 属性 ， 如 表 17.3 所 示 。 


表 17.3 音频 属性 











<body> 
«audio src-"piano.ogg" autoplay= 
> "autoplay" controls-"controls"» 











— «/audio» 
«/body» 
17.17.1 ” 当 页 面 加载 时 会 自动 播放 的 Ogg 音频 


文件 ( 含 默 认 控件 集 ) 


D IRE 


17.17.2 加载 时 会 自动 开始 播放 的 音频 文件 ( 含 
控件 ) 

还 可 以 使 用 loop 属性 让 音频 文件 循环 播 
放 ， 如 图 17.17.3 所 示 。 























«body» 
«audio src-"piano.ogg" loop-"loop" 
— controls-"controls"»«/audio» 














名 称 描 述 «/body» 
a a 17.17.3 “会 循环 播放 的 Ogg 音频 文件 ARU 
autoplay (自动 播放 ) ” 当 音 频 可 以 播放 时 立即 开 控件 集 ) 
始 播 放 2 








添加 浏览 器 为 音频 设置 的 
默认 控件 
muted ( 静音 ) 让 音频 静音 
何 浏 览 器 支持 ) 
loop( 循环 ) 让 音频 循环 播放 


preload ( 预 加 载 ) 告诉 浏览 需要 加 载 的 音频 
内 容 的 多 少 。 可 以 是 以 下 


controls ( 控件 ) 





目前 没有 任 








none 表示 不 加 载 任何 音频 
metadata 表示 仅 加 载 音 频 
的 元 数据 ( 如 长 度 ) 

auto 表示 让 浏览 器 决定 怎 
样 做 (这 是 默认 的 设置 ) 


17.17 为 音频 添加 控件 、 自 动 
播放 并 设置 循环 播放 
使 用 controls fil autoplay 属性 为 音频 文 


件 添加 控件 并 指定 其 在 加 载 后 自动 播放 相当 
容易 ， 如 图 17.17.1 和 图 17.17.2 所 示 。 

















1. 为 音频 文件 添加 控件 并 让 其 自动 播放 的 
步骤 
zv E 

(1) 获取 音频 文件 。 

OO) 输入 <audio src-"my4udio.ext" autoplay-" 
autoplay" controls="contTols"></audio>， 这 里 的 


myAudio. ext 是 音频 文件 的 位 置 、 名 称 和 扩展 名 。 


2. 让 音频 文件 循环 播放 的 步骤 
(1) 获取 音频 文件 。 
(2) 输入 <audio src-"myAudio.ext" loop- 








"loop" controls-"controls"»«/audio», 这 里 的 


myAudio. ext 是 音频 文件 的 位 置 ,名称 和 扩展 名 。 


SE Firefox 不 支持 loop 属性 。 
可 以 让 音频 自动 播放 和 循环 播放 并 不 


意味 着 这 样 做 是 必需 的 。 
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17.48 ” 预 加 载 音 频 文件 


通过 使 用 表 17.3 所 列 的 不 同 的 audio 元 素 
属性 ， 可 以 以 不 同 的 方式 请 求 浏览 器 对 音频 文 
件 进行 预 加 载 ， 如 图 17.18.1 和 图 17.18.2 所 示 。 














<body> 
«audio src-"piano.ogg" preload- 
» "metadata" controls-"controls"» 











> «/audio» 
«/body» 
17.48.41. 当 页 面 加 载 时 ， 这 个 Ogg 音频 文件 仅 


包含 元 数据 ( 如 长 度 ) 





<body> 
«audio src-"piano.ogg" preload-"auto" 
 controls-"controls"»«/audio» 

«/body» 











17.18.2 ”这 个 Ogg 音频 文件 让 浏览 器 决定 要 加 
载 的 内 容 的 多 少 


1. 让 浏览 器 仅 预 加 载 音频 元 数据 

(1) 获取 音频 文件 。 

(2) 输入 «audio src="myAudio.ext" preload=" 
metadata”controls="controls"></audio>， 这 里 的 


nyAudio. ext 是 音频 文件 的 位 置 、 名 称 和 扩展 名 。 


2. 让 浏览 器 决定 如 何 预 加 载 音频 文件 

(1) 获取 音频 文件 。 

(2) 输 A «audio src-"my4udio.ext" preload-" 
auto" controls-"controls"»«/audio», ix HiHy 





myAudio.ext 是 音频 文件 的 位 置 、 名 称 和 扩展 名 。 


指定 preload 属性 的 值 并 不 能 确保 济 
览 器 会 照 做 ， 只 能 作为 一 种 请 求 。 


通过 autoplay 属性 指定 音频 文件 自 
动 播放 会 履 盖 preload 属性 的 设置 ， 因 为 音频 
文件 必须 加 载 以 后 才能 播放 。 


17.19 ”提供 多 个 音频 源 


如 前 所 述 ， 为 了 获得 所 有 兼容 HIML5 
的 浏览 器 的 支持 ， 至 少 需要 为 音频 提供 两 种 
格式 。 实 现 这 一 目标 的 方法 同 video 元 素 也 
是 一 样 的 ， 即 使 用 source 元 素 ， 如 图 17.19.1 
所 示 。 









































«body» 
«audio controls-"controls"» 
«source src-"piano.ogg" type= 
—> "audio/ogg"» 
«source src-"piano.mp3" type- 
> "audio/mp3"» 
«/audio» 
«/body» 











17.19.41. 这 个 audio 元 素 ( 含 默认 控件 集 ) 定 
义 了 两 个 音频 源 文件 ， 一 个 编码 为 Ogg， 男 一 个 为 
MP3 

完整 的 过 程 同 指定 多 个 视频 源 文 件 的 过 
程 是 一 样 的 。 浏 览 需 会 忽略 它 不 能 播放 的 ， 
仅 播 放 它 能 播放 的 。 


肯定 两 种 不 同 的 音频 来 源 的 步骤 

(1) 获取 音频 文件 。 

(2) 输入 <audio controls="controls"> Jf 
始 audio 元 素 〈 含 默认 控件 集 ) 。 

(3) 输 入 <source src-"myAudio.ogg" type= 
"audio/ogg">， 这 里 的 myAudio.ogg 是 Ogg 
Vorbis 音频 文件 的 位 置 、 名 称 和 扩展 名 。 

(4) 输入 «source src-"myAudio.mp3" type=" 
audio/mp3"», ix Hi BS myAudio.mp3 是 MP3 È 
频 文 件 的 位 置 、 名 称 和 扩展 名 。 

(5) fij ^. «/audio» 结束 audio 元 素 。 


type 属性 可 以 帮助 浏览 器 判断 它 是 否 
能 播放 某 个 文件 。 对 音频 文件 来 说 ， 其 值 总 是 
audio/ 加 上 格式 本 身 ， 包 括 audio/ogg. audio/ 
mp3. audio/aac, audio/wav 和 audio/mp4. 
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17.20 添加 具有 备用 超 链接 的 


音频 


为 音频 建立 后 备 方案 的 方法 同 视频 的 情况 
是 完全 相同 的 , 因此 我 在 这 里 免不了 要 重复 了 。 

可 以 使 用 audio 和 source 元 素 定 义 多 个 来 
源 ， 并 在 audio 元 素 结束 之 前 为 不 支持 HTMLS 
的 浏览 需 添 加 后 备 方案 ， 如 图 17.20.1 所 示 。 











«body» 
«audio controls-"controls"» 
«source src-"piano.ogg" type- 
— "audio/ogg"» 
«source src-"piano.mp3" type- 
— "audio/mp3"» 
«a href-"piano.mp3"»Download the 














— audio«/a» 
«/audio» 
«/body» 
17.20.4 这 个 audio 元 素 定 义 了 两 个 音频 源 文 

















件 ， 不 支持 HIML5 的 浏览 器 仅 会 显示 用 于 下 载 该 
音频 的 MP3 版 本 的 超 链 接 


为 音频 添加 备用 超 链接 的 步 又 

(1) 获取 音频 文件 。 

(2) 输入 <audio controls-"controls"» Jf 
始 audio WR 〈 含 默认 控件 集 ) 。 

(3) 输入 «source src-"myAudio.ogg" type=" 











audio/ogg"», ix Hif myAudio.ogg 是 Ogg Vorbis 
音频 文件 的 位 置 、 名 称 和 扩展 名 。 

(4) 输入 «source src-"myAudio.mp3" type= 
"audio/mp3"», ix HA myAudio.mp3 是 MP3 È 
频 文件 的 位 置 、 名 称 和 扩展 名 。 

(5) 输入 <a href="myAudio.mp3">Download 
the audio«/a» (这 里 的 myhudio.mp3 是 MP3 È 
频 文件 的 位 置 、 名 称 和 扩展 名 ) ， 为 不 支持 
HTMLS 的 浏览 需 提 供 下 载 音 频 文件 的 超 链接 。 

(6) 输入 </audio> 结束 audio 元 素 。 

















17.21 添加 具有 备用 Flash 的 


音频 


同 视频 一 样 ，Flash 也 常 被 用 做 颈 和 音频 
内 容 的 插件 。 同 样 ， 也 可 以 为 不 支持 HTMLS 
的 浏览 器 (如 Internet Explorer 8 ) 提供 备用 
Flash 播放 器 。 


为 音频 添加 备用 Flash 的 步骤 

(1) 获取 音频 文件 。 

(2) 输入 <audio controls-"controls"» JF 
n audio 元 素 〈 含 默认 控件 集 ) 。 

(3) 4A «source src-"myAudio.ogg" type=" 














audio/ogg"», ix ifj myAudio.ogg 是 Ogg Vorbis 
音频 文件 的 位 置 、 名 称 和 扩展 名 。 

(4) 输入 «source src-"myAudio.mp3" type=" 
audio/mp3"», ix Hi BP myAudio.mp3 是 MP3 È 
频 文 件 的 位 置 、 名 称 和 扩展 名 。 

(5) 输入 “object type-"application/xsho- 
ckwave-flash" data-"player.swf?audioUrl 
-myAudio.mp38&controls-true"» ( 这 里 的 myAudio 
.mp3 是 MP3 音频 文件 的 位 置 、 名 称 和 扩展 名 ) 
以 指定 这 是 一 个 备用 Flash 播放 器 ， 同 时 指定 
要 使 用 的 播放 占 和 音频 文件 。 在 这 个 例子 中 ， 
player. swf 同 视频 部 分 所 用 的 备用 Flash 播放 
器 是 同一 个 文件 。 注 意 这 里 指定 的 参数 仅 对 
本 音 所 用 的 player. swf 有 效 。 


(6) 输 A «param name="movie" value= 

















"player.swf?audioUrl-myAudio.mp3&controls 
-true" /> (X Œ H myAudio.mp3 是 音频 文件 
的 位 置 、 名 称 和 扩展 名 ) ， 从 而 为 不 理解 
object 元 素 开始 标记 中 信息 的 浏览 器 指定 要 
使 用 的 播放 融和 音频 文件 。 

(7) 输入 </object> 结束 object 元 素 。 

(8) 输入 </audio> 结束 audio 元 素 , 如 
图 17.21.1 和 图 17.21.2 所 示 。 
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«body» 
«audio controls-"controls"» 
«source src-"piano.ogg" type- 
» "audio/ogg"» 
«source src-"piano.mp3" type- 
— "audio/mp3"» 
«object type-"application/ 
> X-shockwave-flash" 
dataz"player.swf?audioUrl- 
> piano.mp3&controls-true"» 
«param name-"movie" value- 
— "player.swf?audioUrl- 
— piano.mp3&controls-true" /> 
</object> 
</audio> 
</body> 














17.21.141 这 个 audio 元 素 定 义 了 两 个 音频 来 源 ， 
而 Internet Explorer 8 等 浏览 器 将 转 而 使 用 指定 的 
] Flash 播放 器 〈 该 播放 器 使 用 MP3 文件 作为 
音频 来 源 ) 







































































« b » 














17.21.2 Internet Explorer 8 中 的 音频 备用 Flash 
播放 器 























Internet Explorer 8 等 浏览 器 会 忽略 
audio 和 source 元 素 ， 直 接 使 用 备用 Flash 播 
放 器 。 只 要 用 户 安 装 了 Flash， 就 能 播放 音频 
内 容 。 


添加 同时 上 具有 备用 Flash 
和 起 链接 的 音频 


可 以 在 备用 Flash 播放 需 后 面 添加 一 个 
下 载 链 接 ， 从 而 提供 额外 的 后 备 方案 ， 如 图 
17.22.1 和 图 17.22.2 所 示 。 


17.22 








为 音频 添加 备用 Flash 和 超 链接 的 步 又 

(1) 获取 音频 文件 。 

(2) 输入 «audio controls-"controls"» JF 
台 audio 元 素 ( 含 默认 控件 集 ) 。 





(3) 输 入 <source src="myAudio. ogg" type=" 
audio/ogg">， 这 里 fW myAudio.ogg 是 Ogg 
Vorbis 音频 文件 的 位 置 、 名 称 和 扩展 名 。 

(4) 输入 <source src-"myAudio.mp3" type=" 
audio/mp3"», iX Hif) myAudio.mp3 是 MP3 音 
频 文件 的 位 置 、 名 称 和 扩展 名 。 

(5) 输入 <a href="myAudio.mp3">Download 
the audio«/a» (这 里 的 myAudio.mp3 是 MP3 È 
频 文件 的 位 置 、 名 称 和 扩展 名 ) ， 为 不 支持 
HTMLS 的 浏览 锅 提 供 下 载 音频 文件 的 超 链 接 。 








«body» 
«audio controls-"controls"» 
«source src-"piano.ogg" type= 
» "audio/ogg"» 
«source src-"piano.mp3" type- 
» "audio/mp3"» 
«object type-"application/ 
— x-shockwave-flash" data- 
— "player.swf?audioUrl-piano.mp3 
> &controls-true" width-"280"5 
«param name-"movie" value- 
» "player.swf?audioUrl-piano.mp3 
— &controls-true" /> 
</object> 
<a href="piano.mp3">Download the 
» audio«/a» 
«/audio» 
«/body» 














图 17.22.1 这 里 为 HTML5 浏览 器 定义 了 两 个 
音频 源 文件 ， 为 支持 Flash 的 浏览 器 ( 如 Internet 
Explorer 8 ) 定义 了 一 个 备用 Flash 播放 器 。 此 外 ， 
还 通过 一 个 简单 的 MP3 音频 文件 链接 添加 了 一 个 
额外 的 后 备 方案 















































村 b » 


— — Download the audio 


17.22.2 Internet Explorer 8 中 的 音频 备用 Flash 
和 超 链接 





























(6) 输入 «object type-"application/x-shoc- 
kwave-flash" data-"player.swf?audioUrl 


-myAudio.mp38controls-true"» ( 3x Hf) myAudio 
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.Mp3 是 MP3 音频 文件 的 位 置 、 名 称 和 扩展 名 ) 
以 指定 这 是 一 个 备用 Flash 播放 器 ， 同 时 指定 
要 使 用 的 播放 器 和 音频 文件 。 注 意 这 里 指定 
的 参数 仅 对 本 章 所 用 的 player. swf 有 效 。 


(7) füj A «param name="movie" value= 








"player.swf?audioUrl-myAudio.mp38controls- 
true" /> ( XX Œ HJ myAudio.mp3 是 音频 文件 
的 位 置 、 名 称 和 扩展 名 ) ， 从 而 为 不 理解 
object 元 素 开 始 标记 中 信息 的 浏览 器 指定 要 
使 用 的 播放 右 和 音频 文件 。 

(8) 输入 </object> 结束 object 元 素 。 

(9) 输入 <a href="myAudio.mp3">Download 
the audio«/a», 

(10) 输入 «/audio» 结束 audio 元 素 。 


17.23 ”获取 多 媒体 文件 


音频 和 视频 是 舱 入 到 网 页 中 的 最 常见 的 
多 媒体 文件 。 可 以 使 用 麦克 风 和 数字 化 软件 
( 如 Windows 上 的 Sound Recorder, Mac 上 
的 Amadeus 等 ) 创建 音频 。 此 外 ， 还 有 很 多 
程序 可 以 用 于 从 CD 创建 MP3。 

随 着 智能 手机 及 其 摄像 涉 (正在 不 断 
提升 ) 的 发 展 ， 在 万 维 网 上 获得 视频 变 得 更 
加 容易 了 。 即 便 视 频 的 格式 并 不 是 你 需要 
的 ， 仍 然 可 以 通过 Miro Video Converter、 
HandBrake 等 软件 对 格式 进行 转换 ， 这 个 过 程 
相当 容易 。 

还 可 以 在 万 维 网 上 查找 声音 和 电影 文件 ， 
但 是 应 该 仔细 地 阅读 相应 的 许可 协议 。 

不 过 ,不 要 局 限于 使 用 音频 和 视频 。 
尽管 使 用 HTML5 的 canvas 元 素 及 其 Java- 
Script API 可 以 创建 动画 ， 但 仍 可 以 像 以 前 
那样 甬 入 Flash 动画 ( 即使 用 object 元 素 ) 。 
HTMLS 媒体 在 不 断 增 强 ， 但 Flash 仍然 有 它 
的 位 置 。 





























17.24 ”考虑 数字 版 权 管理 (DRM) 


在 做 入 音频 和 视频 文件 的 过 程 中 ， 你 
一 定 注意 到 了 这 样 一 个 事实 一 一 所 有 人 都 看 
得 见 指向 源 文件 的 URL， 从 而 利用 它 下 载 
并 “ 盗 取 ”你 的 内 容 ， 就 像 能 入 的 图 像 以 及 
HTML, JavaScript 和 CSS 源 文 件 一 样 。 

对 此 我 们 毫 无 办 法 ， 因 为 HTML5 并 没有 
提供 任何 保护 媒体 内 容 的 方法 (不 过 在 将 来 
有 可 能 出 现 ) 。 

因此 ， 如 果 你 很 关心 对 媒体 文件 的 保护 ， 
那么 暂时 不 要 使 用 本 章 讲 解 的 HTMLS5 原生 多 
媒体 和 备用 Flash 方法 ， 因 为 DRM fi Hec A d 
体 文件 ， 且 DRM 工具 已 经 烧 录 进 了 源 材 料 。 














17.25 EA Flash 动画 


Adobe Flash 软件 可 以 创建 动画 、 电 影 以 
及 其 他 广泛 用 于 万 维 网 的 媒体 。 与 之 相伴 的 
搬 件 通常 用 于 在 网 页 中 对 入 视频 和 音频 。 但 
能 用 到 Flash 的 地 方 还 不 止 这 些 。 有 很 多 动画 
是 使 用 Adobe Flash 制作 的 ， 尽 管 它们 无 法 在 
iPad 和 iPhone 这 样 的 设备 上 播放 ， 但 仍然 有 
用 得 到 它们 的 时 候 。 

前 面 已 经 介绍 了 如 何 使 用 Adobe Flash tt 
入 音频 和 视频 ， 从 而 为 含 Flash 播放 器 的 旧 
浏览 器 提供 后 备 方案 。 接 下 来 将 要 介绍 如 何 
HA ECIER Adobe Flash 动画 SWF 文件 (如 
图 17.25.1 和 图 17.25.2 所 示 ) o 





























BRA Flash 动画 的 步骤 

(1) 输入 “object 开始 object 元 素 。 

(2) 输入 type="application/x-shockwave- 
flash"， 说 明 MIME 类 型 为 Flash 动画 。 

(3) 输 入 data-"filename. swf" , 3x BJ file- 
name. swf 是 Flash 动画 在 服务 器 上 的 名 称 和 
位 置 。 
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(4) 输入 width-"w" height-"^" 指定 动画 
的 尺寸 ， 这 里 的 w 和 是 以 像素 为 单位 的 值 。 

(5) 输入 > 结束 object 的 开始 标记 。 

(6) 输 入 «param name="movie" value="file- 
name.swf" /», iX Hi B filename. swf 与 第 (3) 
步 中 使 用 的 是 同一 个 文件 。 

(7) 输入 </object> 完成 这 个 对 象 。 











<head> 

«title»Embed Flash Movie«/title» 

«/head» 

«body» 

«object type-"application/x-shockwave- 

— flash" data-"http://www.sarahsnotecards 
» .com/catalunyalive/minipalau.swf" 

> width="300" heightz"240"» 

<param name="movie" value="http:// 

> www.sarahsnotecards.com/catalunyalive/ 

—^ minipaulau.swf" /> 

</object> 

</body> 











17.25.1 ZIRA Flash 动画 ， 将 MIME 类 型 设 
为 application/x-shockwave-flash 





[le@ee Embed Flash Movie Co 








e > g Q e«t 








Done 








17.25.2 (E H object Jt zR dE W Dt P iA T 











Flash 动画 


这 种 技术 基于 Drew McLellan 在 4 
List Apart 上 发 表 的 文章 “Flash Satay" (www. 
alistapart.com/articles/flashsatay ) 。 


Drew 找到 了 通过 这 种 技术 使 用 小 的 
引用 电影 帮助 Flash 动画 流 正 确 工 作 的 一 种 途 
径 。 详 情 参 见 他 的 文章 。 


很 多 人 组 合 使 用 object fe embed 标签 
在 网 页 中 插入 Flash 动画 , 这 两 种 标签 都 是 有 效 的 
HIMLS 标记 。 要 查看 更 多 信息 , 可 以 在 Adobe A 
司 的 网 站 (www.adobe.com) 上 搜索 embed Flash- 


17.26 8X AX YouTube 视频 


YouTube ( 以 及 其 他 类 似 的 服务 ) 提供 了 可 
以 上 传 视频 文件 的 服务 器 〈 这 些 文件 的 数量 已 
经 非常 庞大 了 ) , 并 让 访问 者 可 以 观看 这 些 视频 。 


HA YouTube 视频 的 步骤 

(1) 访问 YouTube 网 站 ( www.youtube. 
com ) 并 找到 你 想 使 用 的 视频 。 

(2) 从 地 址 栏 复 制 视 频 代 码 , 它 在 v= 之 后 ， 
一 直到 第 一 个 & 符号 为 止 。 

(3) fü gg — rp "CA Flash 动画 的 步 
JE" . HOA Flash。 在 必须 插入 Flash 动画 的 
URL 的 两 个 位 置 ， 输 入 http://www.youtube. 
com/v/moviecode， 这 里 的 moviecode 是 第 (2) 


步 中 从 地 址 栏 复制 的 代码 。 


Sum 获取 YouTube 视频 代码 时 ， 代 码 出 现 
在 v= 的 后 面 ; 编写 引用 视频 的 URL 时， 使 
用 的 是 V/。 

















17.27 ”通过 canvas 操作 视频 
f Hl HTMLS 原生 多 媒体 的 另 一 个 好 处 是 
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可 以 利用 很 多 来 自 HTMLS 或 与 HTMLS 相关 
的 新 特性 和 新 功能 。 

这 些 新 特性 中 的 一 个 便 是 canvas ( 画布 ) 
元 素 。 

使 用 canvas 元 素 及 相应 的 JavaScript API 
可 以 在 网 页 上 描 制 并 创建 动画 。 

可 以 对 HTML5 视频 应 用 这 些 API， 因 为 
video 元 素 可 以 同 其 他 HTML 元 素 一 样 进 行 
处 理 ， 因 此 它 也 可 以 被 canvas 访问 和 获取 。 
通过 JavaScript API， 可 以 从 播放 的 视频 
中 抓 取 图 像 ， 并 在 canvas 元 素 中 重新 绘制 该 
图 像 ， 从 而 创建 视频 的 截图 。 

通过 API 可 以 对 单个 图 像 像素 进行 操作 ， 
同时 由 于 可 以 根据 视频 在 canvas 中 创建 图 像 ， 
因而 这 意味 着 可 以 调整 视频 的 像素 。 例 如 ， 
可 以 将 视频 转化 为 灰 度 模式 。 

这 只 是 让 你 对 通过 canvas 操作 video 元 素 
建立 一 些 简单 的 概念 ， 对 这 一 主题 的 深入 探讨 
已 经 超出 了 本 书 的 范围 。 更 多 关于 canvas 及 
其 JavaScript API 的 信息 ， 参 见 17.29 节 。 


17.28 联合 使 用 SVG 和 视频 


人 们 开始 关注 的 男 一 项 与 HTML5 有 关 的 
技术 是 SVG (Scalable Vector Graphic, PJ 4# 
放 矢量 图 形 ) 。 

SVG 已 经 存在 相当 一 段 时 间 了 ( 它 诞生 
Á 1999 年 , 但 直到 HTMLS JA T svg 元素。 
通过 该 元 素 可 以 在 网 页 本 身 僚 入 SVG 定义 。 

SVG 使 用 XML 定义 图 形 和 图 像 ， 浏览 
器 则 对 其 进行 解释 和 使 用 ， 从 而 描绘 出 真正 
的 图 形 。SVG 定义 所 包含 的 全 部 内 容 就 是 对 
如 何 绘 制 和 绘制 什么 的 说 明 。 

使 用 SVG 创建 的 图 像 也 是 基于 矢量 而 不 
是 基于 光栅 的 。 这 意味 着 它们 可 以 很 好 地 适 
应 缩放 ， 因 为 浏览 器 只 是 简单 地 依照 绘制 说 
Hj, 根据 所 需 的 尺寸 ,将 图 形 绘 制 出 来 。 光 
顶 图 像 包含 的 是 像素 数据 ， 如 果 要 以 远大 于 
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原始 图 像 的 尺寸 重新 绘制 图 像 ， 就 会 因为 缺 
少 足 够 的 像素 数据 导致 图 像 质量 受 损 。 

XT SVG 的 完整 讨论 超出 了 本 章 的 范围 ， 
这 里 只 是 想 让 你 知道 视频 可 以 同 SVG 定义 联 
合 使 用 。 通 过 SVG 创建 的 图 形 可 以 用 于 对 视 
频 进 行 遮 单 ， 也 即 只 显示 能 透 过 该 图 形 ( 如 
圆圈 ) 的 底层 视频 。 

此 外 ， 还 有 一 些 SVG 滤 镜 可 以 应 用 于 
HTMLS 视频 ， 如 黑白 转换 、 高 斯 模糊 、 色 彩 
饱和 度 等 .关于 SVG 的 更 多 信息 ,参见 17.29 市 。 


17.29 更 多 资源 


本 章 仅 涵盖 了 HTMLS 多 媒体 的 基础 知 
Wo 关于 这 一 主题 , 还 有 很 多 值得 学 习 的 东西 。 
这 里 有 大 量 有 关 资 源 供 你 研究 。 


1. 在 线 资源 

ū "Video on the Web" (http://diveinto. 

html5doctor.com/video.html ) 

OQ HTMLS Video ( http://html5video.org ) 

口 "WebVTT and Video Subtitles" ( www. 
iandevlin.com/blog/2011/05/html5/ 
webvtt-and-video-subtitles ) 

口 "HTMLS Canvas: The Basics” (http:// 


dev.opera.com/articles/view/html-5- 












































canvas-the-basics ) 
DD "Learning SVG" 
com/tagawa/blog/learning-svg ) 


( http://my.opera. 


2. 图 书 

O Ian Devlin 所 著 的 HTMLS Multimedia: 
Develop and Design ( Peachpit Press, 
2011) , ÆJ http;//html5multimedia.com 

Q Shelley Powers 所 著 的 HTML5 Media 

( O'Reilly Media, 2011) 

O Silvia Pfeiffer Pr # fj The Definitive 
Guide to HTMLS Video ( Apress, 2010) 
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本 章 内 容 
a 结构 化 表格 
口 让 单元 格 跨越 多 列 或 多 行 





在 日 常生 活 中 ， 我 们 对 表格 式 数据 已 经 
很 熟悉 了 。 这 种 数据 有 多 种 形式 , 如 财务 数据 、 
调查 数据 、 事 件 日 历 、 公 交 车 时 刻 表 、 电 视 
节目 表 等 。 在 大 多 数 情况 下 ， 这 类 信息 都 由 
列 标题 或 行 标题 加 上 数据 本 身 构成 。 

本 章 将 对 table 元 素 及 其 子 元 素 进 行 
讲解 ,重点 是 基本 的 table 结构 和 样式 。 
HTML 表格 可 以 很 复杂 ， 不 过 很 少 需要 实现 
特别 复杂 的 表格 〈 除非 是 具有 丰富 数据 的 网 
站 ) 。 下 列 链接 展示 了 一 些 复 杂 表 格 结构 的 
代码 示例 ， 并 着 重 强调 了 如 何 提 升 表 格 的 可 
访问 性 。 

口 Roger Johansson 的 “Bring On the 
Tables" (www.456bereastreet.com/ 
archive/200410/bring on the tables/) 。 

口 Roger Hudson ff "Accessible Data Tables" 


(www.usability.com.au/resources/tables 











.cfm ) 。 
口 Stephen Ferg 的 “Techniques for 
Accessible HTML Tables" (www.ferg 


.org/section5O8/accessible tables.html) 。 


18.4 结构 化 表格 


放 在 电子 表格 中 的 信息 通常 很 适合 用 
HTML 表格 呈现 。 

从 基本 层面 看 , table 元 素 是 由 行 组 成 的 ， 
行 又 是 由 单元 格 组 成 的 。 每 个 行 Ctr) 都 包 
含 标题 单元 格 (th ) 或 数据 单元 格 (td) ， 
或 者 同时 包含 这 两 种 单元 格 。 如 果 认 为 为 整 
个 表格 添加 一 个 标题 有 助 于 访问 者 理解 该 表 
H, 可 以 提供 caption。 此 外 ，scope 属性 (也 
是 可 选 的 ， 不 过 推荐 使 用 ) 可 以 告诉 屏幕 阅 
读 器 和 其 他 辅助 设备 当前 的 th 是 列 的 标题 单 
元 格 (使 用 scope="col" ) 还 是 行 的 标题 单元 
格 (使 用 scope="row" ) ， 抑 或 是 用 于 其 他 目 
的 的 单元 格 (参见 最 后 一 条 提示 ) 表格 元 素 
的 基本 实现 代码 如 图 18.1.1 所 示 。 

在 默认 情况 下 ， 表 格 在 浏览 器 中 呈现 的 
宽度 是 其 中 的 信息 在 页 面 可 用 空间 里 所 需要 
的 最 小 宽度 ， 如 图 18.1.2 所 示 。 很 容易 就 会 
想到 可 以 通过 CSS 改变 表格 的 格式 ， 这 很 快 
就 会 讲 到 。 

不 过 ， 图 18.1.1 中 的 表格 似乎 缺少 一 
些 东 西 。 如 何 知 道 每 行 数据 表示 的 是 什么 
ME? 如 果 每 个 行 也 有 标题 单元 格 ， 就 很 容易 
理解 了 。 添 加 这 些 单元 格 只 需要 在 每 行 开头 
添加 一 个 th 元 素 就 可 以 了 。 列 标题 应 设置 
scope-"col", ， 而 每 个 行 的 th( 位 于 td 之 前 ) 
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则 应 设置 scope="row"， 如 图 18.1.3 所 示 。 





<body> 
<table> 
<caption>Quarterly Financials for 
> 1962-1964 (in Thousands)«/caption» 
«tr» 
«th scope-z"col"»1962«/th» 
«th scopez"col"»1963«/th» 
«th scope-z"col"»1964«/th» 
</tr> 
<tr> 
<td>$145</td> 
<td>$167</td> 
<td>$161</td> 
</tr> 
«tr» 
«td»$140«/td» 
«td»$159«/td» 
«td»$164«/td» 
«/tr» 
«tr» 
«td»$153«/td» 
«td»$162«/td» 
«td»$168«/td» 
«/tr» 
«tr» 
«td»$157«/td» 
«td»$160«/td» 
«td»$171«/td» 
«/tr» 
«/table» 
«/body» 
</html> 











18.1.1. 每 个 行 都 是 由 tr 元 素 标 记 的 。 这 是 个 
很 简单 的 表格 ， 它 只 有 一 个 包含 标题 单元 格 (th 
元 素 ) 的 行 和 三 个 包含 数据 单元 格 ( td 元 素 ) 的 行 。 
如 果 要 包含 caption， 它 必须 是 table 里 的 第 一 个 
元 素 (caption 还 可 以 包含 p 和 其 他 的 文本 元 素 ) 
































A basic table - Mozilla Fimefgs aloj x 
Ele Edt wew History Bookmarks Wols Help 
[: -| A basic table. dT 
Quarterly 
Financials for 
1962-1964 (in 
Thousands) 
1962 1963 1964 
$145 $167 $161 
$140 $159 $164 
$153 $162 $168 
$157 $160 $171 











18.1.2 ”在 默认 情况 下 ,th 文本 是 以 粗 体 显 示 的 ， 














«body» 
«table» 
«caption»Quarterly Financials for 
— 1962-1964 (in Thousands)«/caption» 
<thead> <!-- 表格 头 部 --> 
<tr> 
<th scope="col">Quarter</th> 
<th scope="col">1962</th> 
«th scope="col">1963</th> 
<th scope="col">1964</th> 


</tr> 
</thead> 
<tbody> «l-- 表格 主体 --> 
<tr> 
<th scope="row">01</th> 
<td>$145</td> 
<td>$167</td> 
<td>$161</td> 
</tr> 
<tr> 


<th scope="row">02</th> 


<td>$140</td> 
<td>$159</td> 
<td>$164</td> 
</tr> 
... 03 and 04 rows ... 
«/tbody» 
«tfoot» «l-- 表格 尾部 --> 
«tr» 
«th scope-"row"»TOTAL«/th» 
«td»$595«/td» 
«td»$648«/td» 
«td»$664«/td» 
«/tr» 
«/tfoot» 
«/table» 
«/body» 
«/html» 

















18.1.3 ”通过 指定 thead, tbody 和 tfoot 显 式 











地 定义 了 表格 的 不 同 部 分 。 接 着 ， 在 每 行 的 了 











r3. 


添加 了 th 元 素 。tbody fil tfoot 中 的 th 设置 了 


scope= "Tow" ， 表 明 它 们 是 行 标 题 


图 18.1.3 中 还 特意 引入 了 其 他 一 些 专门 
用 于 定义 表格 的 元 素 ， 即 thead, tbody 和 
tfoot, thead 元 素 可 以 显 式 地 将 一 行 或 多 行 











th 和 caption 文本 都 是 居中 对 齐 的， 表格 的 宽度 就 
是 内 容 所 需 的 宽度 





标题 标记 为 表格 的 头 部 。tbody 元 素 用 于 包围 





所 有 的 数据 行 。tfoot 元 素 可 以 显 式 地 将 一 行 
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或 多 行 标 记 为 表格 的 尾部 。 可 以 使 用 tfoot 
包围 对 列 的 计算 值 (就 像 图 18.1.3 中 所 示 的 
那样 ) ， 也 可 以 在 长 表格 ( 如 列车 时 刻 表 ) 
中 使 用 tfoot 重复 thead 中 的 内 容 C 如 果 表 
格 在 打印 时 超过 一 页 ， 有 的 浏览 器 会 在 每 
一 页 都 打印 tfoot fil thead 元素 的 内 容 ) 。 
thead、tfoot 和 tbody 元 素 不 会 影响 表格 的 
布局 ,也 不 是 必需 的 (不 过 推荐 使 用 它们 ) 。 
如 果 包 含 了 thead 或 tfoot， 则 必须 同时 包含 
tbody。 此 外 ， 还 可 以 对 它们 添加 样式 。 

如 图 18.1.2 所 示 ， 在 默认 情况 下 ， 表 
格 被 压 得 很 遍 。 通 过 应 用 一 些 CSS( 如 
18.1.4 所 示 ) ， 可 以 为 单元 格 添加 一 些 空 
间 让 它们 扩大 一 些 (使 用 padding ) ， 添 加 边 
框 以 指示 单元 格 的 边界 (使 用 border ) ， 还 
可 以 对 文本 进行 格式 化 。 这 些 样式 都 有 助 于 
更 好 地 理解 表格 ， 如 图 18.1.5 所 示 。 


创建 表格 结构 的 步骤 

(1) 输入 <table>。 

(2) 如 果 需 要 ， 输 入 «caption»caption 
content</caption>， 其 中 的 caption content 
是 对 表格 的 描述 。 

(3) 如 果 需 要 ， 在 要 创建 的 表格 部 分 的 第 
一 个 tr 元 素 之 前 ,输入 <thead>, <tbody> 或 
«tfoot», 

(4) 输入 «tx» 定义 行 的 开始 。 

(5) 输入 <th scope-"scopetype"» 开始 标 
题 单元 格 ( 其 中 的 scopetype 可 以 是 col、 
row, colgroup 或 rowgroup ) ， 或 者 输入 «td» 
定义 数据 单元 格 的 开始 。 

(6) 输入 单元 格 的 内 容 。 

(T) 输入 «/th» 结束 标题 单元 格 ， 或 者 输 
A </td> 结束 数据 单元 格 。 

(8) 对 行内 的 每 个 单元 格 重复 第 (5) 步 至 
第 (7) 步 。 

(9) 输入 </tr> 结束 行 。 
































(10) 为 所 在 表格 部 分 内 的 每 个 行 重 复 第 
(4) 步 至 第 (9) 步 。 

(11) 如 果 在 第 (3) 步 中 开始 了 一 个 表格 部 
分 ， 就 根据 需要 使 用 </thead>, </tbody> 或 
«/tfoot» 结束 这 个 部 分 。 

(12) 为 每 个 表格 部 分 重复 第 (3) 步 至 第 
(11) 步 。 注 意 ， 一 个 表格 只 能 有 一 个 thead 和 
tfoot, 但 可 以 有 多 个 tbody 元 素 。 

(13) 输入 «/table» 以 结束 表格 。 


























body { 
font: 10096 arial, helvetica, serif; 


} 


table { 
border-collapse: collapse; 


} 


caption { 
font-size: .8125em; 
font-weight: bold; 
margin-bottom: .5em; 


} 


th, 
td { 
font-size: .875em; 
padding: .5em .75em; 
} 


td { 
border: 1px solid #000; 


} 


tfoot { 
font-style: italic; 
font-weight: bold; 
} 














E 18.1.4 这 个 简单 的 样式 表 为 每 个 数据 单元 格 
添加 了 porder， 为 标题 单元 格 和 数据 单元 格 都 添 
加 了 padding， 还 对 表格 caption 和 内 容 进行 了 
格式 化 。 如 果 不 对 table 定义 border-collapse: 
collapseij ， 每 个 td 的 边框 和 相 邻 td 的 边框 之 间 
就 会 出 现 一 些 空隙 ( 默认 值 为 border-collapse: 
separate; ) 。 还 可 以 像 18.2 节 所 示 的 那样 ， 对 th 
元 素 应 用 边框 
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. Basic table evolved 





Quarterly Financials for 1962-1964 
(in Thousands) 


Quarter 1962 1963 1964 


= 
= 
" 
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18.1.5 现在， 表格 既 有 列 标题 ， 也 有 行 标题 ， 
还 有 一 个 显示 各 列 数据 之 和 的 行 ( 位 于 tfoot 元 素 
中 ) 。 此 外 , 这 里 还 显示 了 为 边框 、 单 元 格 内 边 距 、 
caption 内 容 和 tfoot 内 容 添加 的 样式 























如 果 table 是 说 套 在 figure 元 素 内 除 
figcaption 以 外 的 唯一 元 素 ， 则 可 以 省 略 caption, 
使 用 figcaption 对 表格 进行 描述 (参见 4.3 节 )。 
注意 ， 不 要 在 table Pak figcaption, tm 
跟 往 常 一 样 将 flgcaption 放 在 figure 中 。 


还 可 以 在 样式 表 中 对 table、td 或 th 
元 素 设 置 background, width 等 属性 ， 尽 管 没 
有 在 CSS 示例 中 进行 演示 ， 如 图 18.1.4 所 示 。 
总 之 ， 大 多 数 用 于 其 他 HTML 元 素 的 文本 格 
式 和 其 他 格式 也 可 以 应 用 于 表格 (参见 18.2 
节 的 另 一 个 例子 ) 。 你 可 能 会 发 现 ， 不 同 的 
浏览 器 显示 的 样式 稍 有 差异 ， 尤 其 是 Internet 
Explorer。 


可 以 通过 scope 属性 指定 th 为 一 组 
列 的 标题 ( 使 用 scope-"colgroup") ， 或 者 为 
一 组 行 的 标题 (使 用 scope-"rowgroup" ) 。 对 
于 后 者 ， 参 见 下 一 节 的 示例 。 


18.2 ”让 单元 格 跨越 多 列 或 多 行 


可 以 通过 colspan 和 Yowspan 属性 让 th 
或 td 跨越 一 个 以 上 的 列 或 行 。 对 该 属性 指 
定 的 数值 表示 的 是 跨越 的 单元 格 的 数量 ， 如 
图 18.2.1 和 图 18.2.2 所 示 。 








<body> 
<table> 
«captiomTV Schedule«/caption» 
<thead> «l-- 表格 头 部 --> 
<tr> 
<th scope="rowgroup">Time</th> 
<th scope="col">Mon</th> 
<th scope="col">Tue</th> 
«th scope="col">Wed</th> 
</tr> 
</thead> 
<tbody> <!-- 表格 主体 --> 
<tr> 
<th scope="row">8 pm</th> 
<td>Staring Contest</td> 
<td colspan="2">Celebrity Hoedown 
> </td> 
</tr> 
<tr> 
<th scope="row">9 pm</th> 
<td>Hardy, Har, Har</td> 
«td»What's for Lunch?</td> 
«td rowspanz"2"»Movie of the Week 
> </td> 
</tr> 
<tr> 
<th scope="row">10 pm</th> 
«td»Healers, Wheelers &amp; 
— Dealers«/td» 
«td»It's a Crime«/td» 


























</tr> 
</tbody> 
</table> 
</body> 
</html> 
18.2.1 通过 在 包含 Celebrity Hoedown 演出 的 


td 上 应 用 colspan="2"， 指 示 该 演出 的 上 映 时 间 包 
含 周 二 和 周三 晚上 8 点 这 两 个 时 间 。 类 似 地 ， 在 包 
含 Movie of the Week 的 td 上 添加 了 rowspan="2", 
因为 该 演出 持续 两 个 小 时 。 同 时 ， 注 意 Time 这 个 
th 设置 了 scope="rowgroup"， 因 为 它 是 它 正 下 方 的 
每 个 行 标 题 组 的 标题 
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Table with colspan and rowspan - Mozilla Firefox 


JA 
Elle Edit View History Bookmarks Tools Help 
Í i Table with colspan and rowspan 加 


TV Schedule 











Staring Contest Celebrity Hoedown 





Hardy, Har, Har What's for Lunch? 





Movie of the Week 


Healers, Wheelers 
& Dealers 


It's a Crime 


























18.2.2 ”仅仅 通过 查看 代码 ， 很 难 判断 colspan 
和 rowspan 对 表格 的 影响 ， 但 在 浏览 带 中 查看 
就 清楚 多 了 。 这 个 表格 还 用 CSS 添加 了 一 些 样 
式 ， 完 整 的 样式 表 见 本 书 的 配套 网 站 (www. 


bruceontheloose.com/htmlcss/examples/ ) 














1. 让 单元 格 跨越 两 个 或 两 个 以 上 列 的 步骤 

(1) 在 需要 定义 跨越 一 个 以 上 的 列 的 单元 
格 的 地 方 ， 输 入 <td 和 一 个 空格 。 

(2) 输入 colspan="n">， 这 里 的 n 是 单元 
格 要 跨越 的 列 数 。 

(3) 输入 单元 格 的 内 容 。 

(4) 输入 </td>。 

(5) 根据 18.1 节 中 的 介绍 ， 完 成 表格 的 其 
余部 分 。 如 果 创 建 了 一 个 跨越 两 列 的 单元 格 ， 
在 该 行 就 应 该 少 定义 一 个 单元 格 ; 如 果 创 建 
了 一 个 跨越 三 列 的 单元 格 ， 在 该 行 就 应 该 少 
定义 两 个 单元 格 ， 以 此 类 推 。 








2. 让 单元 格 跨越 两 个 或 两 个 以 上 行 的 步 又 

(1) 在 需要 定义 跨越 一 个 以 上 的 行 的 单元 
格 的 地 方 ， 输 入 <td 和 一 个 空格 。 

(2) 输入 rowspan="n">， 这 里 的 n 是 单元 
格 要 跨越 的 行 数 。 

(3) 输入 单元 格 的 内 容 。 

(4) 输入 </td>。 

(5) 根据 “结构 化 表格 ”一 节 中 的 介绍 , 完 
成 表格 的 其 余部 分 。 如 果 创 建 了 一 个 rowspan 
等 于 2 的 单元 格 ， 就 不 需要 定义 下 一 行 中 该 
单元 格 对 应 的 单元 格 了 ; 如 果 创 建 了 一 个 
rowspan 等 于 3 的 单元 格 ， 就 不 需要 定义 下 面 
两 行 中 该 单元 格 对 应 的 单元 格 了 , 以 此 类 推 。 


表格 中 的 每 一 行 都 应 具有 相同 的 单元 
格 数量 。 跨 越 多 列 的 单元 格 应 算 做 多 个 单元 
格 ， 它 的 colspan 属性 值 为 多 少 ， 就 算 做 多 少 
个 单元 格 。 














表格 中 的 每 一 列 都 应 具有 相同 的 单元 
格 数量 。 跨 越 多 行 的 单元 格 应 算 做 多 个 单元 
格 ， 它 的 rowspan 属性 值 为 多 少 ， 就 算 做 多 少 
个 单元 格 。 
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本 章 内 容 

口 加 载 外 部 脚本 

口 添加 般 入 脚本 

口 处 理 JavaScript 事件 








HTML 定义 网 页 的 内 容 ，CSS 定义 网 页 
的 表现 ，JavaScript 则 定义 特殊 的 行为 。 
通过 编写 简单 的 JavaScript 程序 ， 可 以 显 
示 和 隐藏 内 容 ; 通过 编写 复杂 一 些 的 程序 ， 
可 以 加 载 数 据 并 动态 地 更 新 页 面 。 可 以 操作 
定制 的 HTML5 audio 和 video 元 素 控件 ， 创 
建 基于 浏览 器 的 游戏 (使 用 HTMLS 的 canvas 
元 素 ) 。 还 可 以 利用 一 些 强大 的 HTMLS 特性 
及 相关 技术 编写 强大 的 Web 应 用 程序 ( 这 属 
于 高 级 主题 ， 不 在 本 书 的 范围 之 内 ) 。 

如 你 所 见 ，JavaScript 的 功能 非常 强大 ， 
而 它 的 使 用 也 呈现 了 爆炸 式 的 增长 。jQuery 
(jquery.com ) , MooTools ( mootools.net ) 、 
YUI ( yuilibrary.com ) ^5 JavaScript 库 确 保 了 
为 页 面 添加 简单 交互 和 复杂 行为 的 过 程 变 得 
容易 了 许多 ， 同 时 也 对 实现 路 浏览 需 行 为 一 
致 性 提供 了 帮助 。 在 这 些 库 中 ,jQuery 是 用 
得 最 多 的 一 个 ， 这 主要 是 因为 初学 者 很 容易 
上 和 手 ， 同 时 它 有 很 好 的 在 线 文 档 和 大 型 社区 
支持 。 

浏览 器 厂商 花费 了 大 量 的 时 间 让 它们 的 
浏览 需 处 理 JavaScript 的 速度 较 几 年 前 的 版 本 






























































有 了 显著 的 提升 。JavaScript 也 可 以 在 平板 电 
脑 和 现代 移动 浏览 器 中 和 运行， 不 过 出 于 性 能 
方面 的 原因 ， 可 能 需要 为 这 些 设备 考虑 在 页 
面 中 加 载 的 脚本 的 大 小 。 

不 过 JavaScript 本身 是 一 个 独立 、 庞 
大 的 主题 ， 因 此 我 们 不 会 在 本 书 讲解 这 门 
语言 。 我 仍 会 解释 如 何 将 创建 好 的 脚本 插 
和 人 到 HTML 文档 中 去 ， 同 时 给 出 一 些 关 于 
如 何在 插入 脚本 时 尽量 降低 其 对 页 面 影响 
的 建议 ， 此 外 还 会 提供 对 事件 处 理 程序 的 
概览 。 














19.1 加载 外 部 脚本 


脚本 主要 有 两 种 类 型 ， 一 种 是 从 外 部 文 
件 (使 用 纯 文本 格式 ) 加 载 的 脚本 ， 另 一 种 
是 藤 入 在 页 面 中 的 脚本 ( 这 一 种 将 在 下 一 节 
讲解 ) 。 这 同 外 部 样式 表 舱 入 样式 表 的 概 
念 是 类 似 的 。 

同 为 页 面 添加 样式 表 一 样 ， 从 外 部 文件 
加 载 脚本 通常 比 在 HIML 中 其 入 脚本 要 好 一 
些 (如 图 19.1.1 所 示 ) 。 这 样 做 的 好 处 也 是 
类 似 的 ， 即 可 以 在 需要 某 一 脚本 的 每 个 页 面 
加 载 同一 个 JavaScript 文件 。 需 要 对 脚本 进行 
修改 时 ， 就 可 以 仅 编辑 一 个 脚本 ， 而 不 是 在 
各 个 单独 的 HTML 页 面 更 新 相似 的 脚本 。 
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«IDOCTYPE html» 
«html lang="en"> 
«head» 

«meta charset-"utf-8" /» 

«title»Loading an External Script«/title» 
«link rel="stylesheet" href-"css/base.css" /» 
«/head» 

«body» 
... All of your HTML content is here ... 


«script src-"behavior.js"»«/script» 
«/body» 
«/html» 











19.1.1. script 元素 的 src 属 性 引用 脚本 的 
URL。 在 大 多 数 情 况 下 ， 最 好 在 页 面 的 最 末尾 加 载 
脚本 ， 即 </body> 结束 标记 的 前 面 。 也 可 以 在 页 面 
的 head 元 素 中 加 载 脚本 ， 如 图 19.1.2 所 示 ， 但 这 
样 做 会 影响 页 面 显示 的 速率 。 更 多 信息 参见 “脚本 
和 性 能 的 最 佳 实践 ” 




































































«IDOCTYPE html» 
«html lang="en"> 
«head» 

«meta charset-"utf-8" /» 

«title»Loading an External Script«/title» 
d-- 在 加 载 任何 JS 文件 之 前 加 载 样 式 表 --> 
«link rel="stylesheet" href-"base.css" /> 
«script src-"behavior.js"»«/script» 
«/head» 
«body» 
ee 所 有 HTML 内 容 写 在 这 里 …… 
«/body» 
«/html» 











图 19.1.2 在 这 个 例子 中 ,脚本 是 在 head 中 加 载 的 。 
它 位 于 link 元 素 的 后 面 ， 因 此 不 会 影响 CSS 文件 
先 于 脚本 开始 加 载 。 关 于 为 什么 要 尽 可 能 地 避免 在 
head 中 加 载 脚本 ， 参 见 “ 脚 本 和 性 能 的 最 佳 实践 ” 

无 论 是 加 载 外 部 脚本 还 是 舱 入 脚本 ， 均 
使 用 script ( 脚本 ) 元 素 。 


加 载 外 部 脚本 的 方法 

输入 <script src-"script.js"»«/script», 
这 里 的 script. js 是 外 部 脚本 在 服务 右上 的 位 
置 及 文件 名 。 应 该 尽 可 能 地 将 脚本 元 素 放 在 
</body> 结束 标记 之 前 ( 参见 图 19.1.1 ) ， 而 不 

















是 放 在 文档 的 head 元 素 里 (参见 图 19.1.2)。 


一 个 页 面 可 以 加 载 多 个 JavaScript 文件 ， 
可 以 包含 多 个 嵌入 的 脚本 (参见 图 19.2.1 ) 。 在 
默认 情况 下 ,浏览 器 会 按照 脚本 在 HTML 中 出 
现 的 顺序 对 它们 进行 加 载 ( 如 果 需 要 的 话 ) 和 
执行 。 关 于 为 什么 需要 尽 可 能 地 避免 加 载 多 个 
脚本 ， 参 见 “ 脚 本 和 性 能 的 最 佳 实践 ”。 


不 理解 JavaScript 的 浏览 器 (数量 很 
少 ) 或 用 户 禁用 了 JavaScript 的 浏览 器 会 忽略 
JavaScript 文件 。 因 此 要 确保 页 面 不 依赖 于 
JavaScript 为 用 户 提 供 对 内 容 的 可 访问 性 和 基 
本 体验 。 


为 了 保持 组 织 文件 良好 ， 通 常 将 
JavaScript 文件 放 在 一 个 子 文件 夹 中 ( 常用 的 
名 称 包括 js. scripts 等 ) 。src 属性 需要 反映 
这 一 点 ， 就 像 指 向 某 一 资源 的 其 他 URL 一 样 。 
例如 ， 如 果 图 19.1.1 中 的 文件 位 于 名 为 assets/ 
js/ 的 文件 夹 内 ,， 则 应 输入 <script src-"assets/ 
js/behavior.js"></script>。 (这 只 是 一 个 示例 ， 
还 有 其 他 表示 URL 的 方式 ， 参见 1.7 节 。 ) 


图 19.1.1 和 图 19.1.2 中 的 JavaScript 
文件 名 为 behaviorjs， 也 可 以 指定 其 他 有 效 的 
名 称 ， 只 要 以 .js 为 扩展 名 。 


从 技术 上 说 ， 为 页 面 添加 JavaScript 还 
有 第 三 种 方式 : 内 联 脚 本 。 内 联 脚本 是 直接 在 
HTML 中 特定 元 素 属性 上 指定 的 JavaScript 片 
段 。 在 这 里 提 到 这 种 方式 是 为 了 告诉 你 ， 应 该 
避免 使 用 它们 , 就 像 避 免 使 用 内 联 样 式 表 一 样 。 
正如 内 联 样式 表 将 HITML fe CSS 混合 在 一 起 ， 
内 联 脚本 则 将 HTML 和 JavaScript 纠缠 在 一 起 ， 
这 与 将 它们 分 开 的 最 佳 实践 不 符 。 
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脚本 和 性 能 的 最 佳 实践 

关于 脚本 和 页 面 性 能 最 佳 实践 的 详细 讨论 超出 了 本 书 的 范围 ， 不 过 这 里 仍 会 提 到 几 个 影 
响 较 大 的 要 点 。 

最 重要 的 一 点 ， 理 解 浏览 器 如 何 处 理 脚本 是 很 有 用 的 。 随 着 页 面 的 加 载 ， 在 默认 情况 下 ， 
浏览 器 会 按照 脚本 在 HTML 中 出 现 的 顺序 依次 对 每 个 脚本 进行 下 载 ( 对 于 外 部 脚本 ) 、 解 析 
和 执行 。 在 处 理 脚本 的 过 程 中 ， 浏 览 器 既 不 会 下 载 该 script 元 素 后 面 出 现 的 内 容 ( 哪怕 是 文 
本 ) ， 也 不 会 呈现 这 些 内 容 。 这 称 为 阻塞 行为 《blocking behavior ) 。 

这 条 规则 对 嵌入 脚本 和 外 部 脚本 都 有 效 。 可 以 想象 ， 这 会 影响 页 面 的 呈现 速 府 ， 影 响 的 
程度 取决 于 脚本 的 大 小 和 它 执行 的 动作 。 

大 多 数 浏览 器 都 会 这 样 做 ， 因 为 JavaScript 可 能 包含 其 他 脚本 所 依赖 的 代码 、 立 即 生成 
内 容 的 代码 或 对 页 面 进行 调整 的 代码 。 浏 览 器 需要 在 结束 呈现 之 前 考虑 所 有 这 些 问 题 。 

那么 如 何 避 免 这 一 点 呢 ? 消除 JavaScript 阻塞 的 最 简单 的 方法 就 是 将 所 有 的 script 元 素 
放置 在 HTML 结束 之 前 , PP </body> 结束 标记 的 前 面 。 随 便 花 点 几时 间 浏 览 一 下 其 他 人 的 网 站 ， 
不 难 发 现 脚本 是 在 head 元 素 中 加 载 的 。 除 了 少数 必须 这 样 做 的 情况 ， 通 常 认为 这 是 一 种 过 时 
的 做 法 , 应 当 尽 可 能 地 避免 。( 必须 这 样 做 的 一 种 情况 就 是 加 载 第 11 章 所 述 的 HTML5 £177, ) 
如 果 确 实 需要 在 head 中 加 载 脚 本 ,也 要 将 它们 放置 在 所 有 加 载 CSS 文 件 的 1ink 元 素 之 后 (这 
也 是 出 于 性 能 的 考虑 ) 。 

另 一 种 简单 的 加 快 脚本 加 载 速率 的 方法 就 是 将 JavaScript 放 在 同一 个 文件 中 (或 尽 可 能 
少 的 一 些 文件 中 ) 并 压缩 代码 。 通 常 ， 压 缩 代码 会 去 除 换 行 、 注 释 及 额外 的 空格 ( 以 及 其 他 
同 未 压缩 的 代码 存在 差异 的 地 方 ) 。 你 可 以 想象 一 下 只 在 一 个 很 长 的 行内 编写 代码 ， 而 永远 
ES RcET 

可 以 使 用 以 下 工具 压缩 脚本 : 

口 Google Closure Compiler 

http://code.google.com/closure/compiler/ ( 供 下 载 的 版 本 及 文档 ) 
http://closure-compiler.appspot.com ( 在 线 版 本 ) 

DQ YUI Compressor 

http:;//developer.yahoo.com/yui/compressor/ ( 供 下 载 的 版 本 及 文档 ) 
http://refresh-sf.com/yui/( 非 官方 的 在 线 版 本 ) 

上 述 每 个 工具 都 能 减 小 文件 的 大 小 ， 而 压缩 的 结果 则 因 脚 本 而 异 。 通 常 ， 浏览 器 加 载 一 
个 文件 比 加 载 两 个 文件 (或 更 多 的 文件 ) 要 快 一 些 ， 即 便 单 个 文件 的 大 小 比 不 同文 件 的 总 大 
小 还 要 大 一 些 ( 除非 大 得 多 ) 。 

这 是 两 种 常用 且 强 大 的 方法 ， 但 真正 说 起 来 ， 它 们 也 只 是 一 些 皮毛 的 东西 。 关 于 脚本 加 载 
的 方法 及 其 优化 ， 强 烈 推 荐 Steve Souders 所 著 的 Even Faster Web Sites ^ ( O' Reilly Media, 2009) 
一 书 , 以 及 他 的 网 站 www.stevesouders.com。 不 过 有 言 在 先 , Souders 的 某 些 讨论 相对 技术 一 些 。 


























(D 中 文 版 《高 性 能 网 站 建设 进 阶 指南 》 已 由 电子 工业 出 版 社 出 版 。 一 一 译 者 注 
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19.2 ”添加 同 入 脚本 


BOAT HTML 文档 之 内 ， 同 能 入 
样式 表 很 相似 。 和 能 入 的 脚本 包含 在 script 元 
素 内 ， 如 图 19.2.1 所 示 。 般 入 脚本 并 不 是 首 
选 的 方法 (参见 19.1 节 ) , 但 有 时 必须 这 样 做 。 








<!DOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset-"utf-8" /» 
«title»Adding an Embedded Script«/title» 








src-"behavior.js"»Some function in here«/ 
script» 是 无 效 的 。 对 于 任何 Script 元素 ， 
要 么 仅 通过 src 加 载 外 部 脚本 ， 要 么 嵌入 脚 
本 并 不 含 STC。 





«IDOCTYPE html» 
«html lang-"en"» 
«head» 

«meta charset-"utf-8" /» 

«title»Loading an External Script«/title» 
<l-- 在 加 载 任何 JS 文件 之 前 加 载 样式 表 --> 
«link rel-"stylesheet" href-"base.css" /> 












































«link rel="stylesheet" href-"css/base.css" /» «script» 
«/head» /* 
«body» JavaScript RA BÆRE 
ee 所 有 HTML 内 容 写 在 这 里 …… *y 
</script> 
<script> </head> 
/* «body» 
JavaScript 代 码 写 在 这 里 | [onn 所 有 的 HTML 内 容 写 在 这 里 …… 
*/ «/body» 
</script> </html> 
</body> 
</html> 19.2.2 pcd. IRAI DT head 中 。 
它 位 于 link 元 素 的 后 面 ， 从 而 让 CSS 文件 更 1 T 
图 19.2.1 AMEBA sre 属性。 相反， 代码 位 un. OE TOTAL SUR ST EGRE head rh A 


T wy. ADAEqX AGNI. MZA np EIE 
«/body» 结束 标记 之 前 这 样 做 。 虽然 也 可 以 在 head 
中 藤 入 脚本 (如 图 19.2.2 所 示 ) ,但 通常 出 于 性 能 
原因 而 避免 这 样 做 


添加 榜 入 脚本 的 步 又 

(1) Æ HTML 文档 中 ,输入 <script>。 
(2) 输入 脚本 的 内 容 。 

(3) 输 入 </script>, 


每 个 脚本 都 按照 它们 出 现在 HTML 
中 的 顺序 依次 进行 处 理 ， 无 论 是 诅 入 脚本 还 
是 外 部 脚本 (参见 19.1 节 ) 。 

















尽管 script 元 素 必须 有 结束 标记 
(</script>) ,但 在 有 src 属性 的 情况 下 ， 
不 能 在 该 元 素 的 开始 标记 和 结束 标记 之 间 欧 


入 脚本 (参见 19.1 节 ) 。 也 就 是 说 ，<script 





脚本 ， 参 见 “ 脚 本 和 性 能 的 最 佳 实践 ” 


19.3 JavaScript 事件 


在 本 章 的 引言 中 ， 我 提 到 对 JavaScript 的 

深入 讨论 超出 了 本 书 的 范围 。 不 过 ， 我 仍然 

想 让 你 大 体 了 解 一 下 JavaScript 事件 ， 从 而 对 
JavaScript 能 做 什么 有 一 些 基 本 的 认识 。 

可 以 编写 JavaScript 对 特定 的 、 预 定义 的 
事件 (由 访问 者 或 浏览 器 触发 ) 进行 响应 。 
下 面 的 列表 只 是 编写 脚本 时 可 用 的 事件 处 理 
程序 的 一 些 简单 示例 。HTML5 引入 了 大 量 其 
他 的 事件 处 理 程 序 ， 其 中 很 多 都 是 与 audio 和 
video 元 素 相 关 的 。 有 的 触 屏 设备 也 开始 支持 
特殊 的 基于 触摸 操作 的 事件 处 理 程序 。 


























注意 下 面 的 列表 中 的 “mouse” ( 鼠标 ) 
代表 所 有 “指针 设备 ”。 例 如 ，onmousedown 
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会 在 访问 者 使 用 电子 笔 、 真 正 的 鼠标 或 其 他 
类 似 的 设备 时 被 触发 。 


O onblur: 访问 者 离开 先前 获得 焦点 的 

元 素 (参见 onfocus ) 。 

口 onchange: 访问 者 改变 元 素 的 值 或 内 
容 。 通 常用 于 表单 字段 ( 关于 表单 ， 
参见 第 16 章 ) 。 

O onclick: 访问 者 点 击 特定 的 区 域 或 在 

元 素 ( 如 链接 ) 获 得 焦点 时 按 下 回 车 键 。 

O ondblclick: 访问 者 双击 特定 的 区 域 。 

口 onfocus: 访问 者 选择 、 点 击 或 用 制 表 

键 将 焦点 移 至 特定 的 元 素 。 

口 onkeydown: 在 指定 的 元 素 上 ， 访 问 者 

按 下 一 个 键 。 

口 onkeypress: 在 指定 的 元 素 上 ， 访 问 

者 按 下 并 松 开 一 个 键 。 

口 onkeyup: 在 指定 的 元 素 上 ， 访 问 者 在 

输入 后 松 开 一 个 键 。 

O onload: 浏览 絮 完 成 页 面 的 加 载 ， 包 

括 所 有 的 外 部 文件 ( 如 图 像 、 样 式 表 、 

JavaScript 等 ) 。 


























口 onmousedown: 在 指定 的 元 素 上 ， 访 问 
者 按 下 鼠标 键 。 
O onmousemove: 访问 者 移动 鼠标 指针 。 
O onmouseout: 访问 者 在 鼠标 指针 停留 
的 特定 元 素 上 移 开 鼠标 。 
O onmouseover: 访问 者 将 鼠标 指向 元 素 。 
口 onmouseup: 访问 者 在 点 击 元 素 后 松 开 
鼠标 键 ( 与 onmousedown 相反 ) o 
O onreset: 访问 者 点 击 表单 的 重 置 按 钮 
或 在 该 按钮 获得 焦点 时 按 下 回 车 键 。 
口 onselect: 访问 者 选择 元 素 中 的 一 个 
或 多 个 字符 。 
O onsubmit: 访问 者 点 击 表单 的 提交 按 
钮 或 在 该 按钮 获得 焦点 时 按 下 回 车 键 。 
HTMLS 事件 处 理 程 序 的 完整 列表 参见 
http://dev.w3.org/html5/spec-author-view/global- 
attributes.html。 一 些 触 屏 设备 (如 智能 手机 、 
平板 电脑 ) 包含 的 与 触摸 相关 的 事件 处 理 程 
序 包括 touchstart, touchend, touchmove 等 
( https://dvcs.w3.org/hg/webevents/raw-file/tip/ 














touchevents.html ) 。 
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本 章 内 容 

口 尝试 一 些 调试 技巧 

口 检查 常见 错误 : 一 般 问 题 
Q 检查 常见 错误 : HTML 
口 检查 常见 错误 : CSS 

口 验证 代码 

口 测试 页 面 

口 当 图 像 不 显示 时 

口 仍然 有 错误 





你 编写 好 了 全 新 的 页 面 ， 却 发 现 它们 在 
浏览 器 中 并 没有 像 你 预期 的 那样 显示 ， 或 者 
完全 不 显示 ,或 者 在 你 的 默认 浏览 器 中 显示 
得 很 好 ,但 客户 使 用 其 他 的 浏览 器 打开 时 却 
发 现 页 面 显得 有 些 奇 怪 。 

ft HTML, CSS 和 众多 的 浏览 右 (尤其 
EHN Và as) 和 平台 之 间 ， 很 容易 产生 各 种 
各 样 的 问题 。 本 章 会 提示 一 些 常见 的 错误 ， 
并 帮助 你 清除 自己 造成 的 错误 。 

这 些 调试 技术 中 的 一 部 分 看 起 来 相当 基 
础 ， 但 网 页 的 问题 往往 也 非常 基础 。 在 查找 
大 的 问题 之 前 ， 要 确保 没有 任何 小 的 问题 。 
我 将 在 第 一 节 中 介绍 如 何 进 行 检查 。 














确认 代码 正确 以 后 ， 应 该 在 一 个 或 多 个 
平台 的 儿 种 浏览 絮 中 对 网 站 进行 充分 的 测试 ， 
查看 各 个 页 面 是 不 是 按照 预期 的 方式 工作 CR 
DL 20.6 节 及 “应 该 在 哪些 浏览 器 中 进行 测 
试 ”) 。 

















20.1 ”尝试 一 些 调 试 技巧 


下 面 是 用 于 排查 网 页 错误 的 一 些 真 实 技巧 。 

口 首先 检查 常见 的 错误 。 

O 细心 观察 ， 有 条 不 率 。 

O 逐步 开展 工作 。 做 出 小 的 改动 ， 并 在 
每 次 改动 后 进行 测试 。 这 样 才能 在 问 
题 出 现 之 后 定位 到 问题 的 来 源 。 

口 调试 时 , 从 你 能 确保 正确 的 地 方 开始 。 
之 后 再 逐一 添加 可 能 出 问题 的 部 分 ， 
每 次 添加 完 以 后 都 在 浏览 器 中 进行 测 
试 ， 直 到 找到 问题 的 来 源 为 止 。 

口 用 排除 法 寻找 产生 问题 的 代码 片段 。 
例如 ， 可 以 注释 掉 一 半 代 码 ， 检 查 问 
题 是 否 出 于 另 一 半 人 代码， 如 图 20.1.1 
所 示 。 再 在 有 问题 的 代码 中 注释 邱 
更 小 的 部 分 ， 直 到 找 出 问题 。 ( 参 
见 3.17 节 和 7.2 节 。) 
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.entry { 
border-right: 2px dashed itb74e07; 
margin: O .5em 2em 0; 


} 


.entry h2 { 
font-size: 1.25em; 
line-height: 1; 

} 


/* 

continued, 

.entry .date { 
text-align: right; 

} 


.entry .date { 
line-height: 1; 
margin: O 1em O 0; 
padding: 0; 
position: relative; 
top: -1em; 


} 


.intro ( 
margin: -5px O O 110px; 
} 


*/ 


.photo { 
float: left; 
height: 75px; 
width: 100px; 


} 


.photo a { 
margin: 0; 
padding: 0; 








留意 输入 错误 。 很 多 令 人 费解 的 错误 
E pe). fA EAE, 
在 HTML 中 以 某 种 方式 拼写 类 名 ， 却 
在 CSS 中 使 用 了 另 一 个 名 称 。 

在 CSS 中 ， 如 果 不 确定 问题 是 出 在 
属性 上 还 是 出 在 选择 器 上 ， 可 以 试 着 
在 选择 器 上 添加 极其 简单 的 声明 ， 
如 color: red;, border: 1px solid 
red; 等 (如果 red 已 经 用 于 网 页 的 设 
计 ， 也 可 以 选择 一 种 不 常见 的 颜色 ， 
如 pink) 。 如 果 元 素 变 成 红色 ， 那 么 
问题 就 出 在 属性 上 ,否则 问题 就 出 在 
选择 器 上 【假定 不 存在 另 一 个 特殊 性 
更 强 的 选择 器 ， 也 不 存在 比 当前 选择 
器 更 靠 后 的 选择 器 ) 。 

休息 一 下 。 有 时 ， 在 散步 一 小 时 之 后 
工作 15 分 钟 比 用 这 一 小 时 苗 坐 在 电 朋 
前 工作 的 收获 还 要 大 。 有 了 时， 问题 是 
在 小 楚 时 想到 解决 方案 的 。 

使 用 一 个 或 多 个 开发 工具 ， 直 接 在 浏 
览 嚣 中 对 HTML 或 CSS 进行 修改 测试 。 
或 者 使 用 这 些 工 具 审 查 代 码 ， 试 着 对 
问题 进行 定位 。 (参见 “浏览 器 开发 
工具 ”。 ) 



































Et 











图 20.1.1 我 注释 掉 了 这 段 代码 中 间 的 一 部 分 ， 以 
查看 它 是 不 是 出 错 的 原因 。 注 意 ,很 多 HTML 和 
CSS 编辑 器 都 包含 代码 高 亮 ， 即 自动 为 元 素 、 选 择 
器 等 设置 不 同 的 颜色 。 这 对 调试 是 有 帮助 的 。 例 如 ， 
如 果 将 CSS 属性 名 称 打 错 了 ， 编 辑 器 就 不 会 以 预 
期 的 颜色 显示 它 ， 表 明 它 是 无 效 的 
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浏览 器 开发 工具 

浏览 器 都 包含 调试 工具 ， 或 者 有 作为 插件 的 调试 工具 。 很 多 工具 的 特性 都 是 相似 的 。 

会 发 现 ， 一 种 反复 用 到 的 特性 就 是 直接 修改 CSS A HTML 并 立即 查看 它们 对 页 面 的 影 
这 可 以 让 你 快速 地 对 修改 进行 测试 ， 满 意 之 后 再 将 它们 包含 到 代码 里 去 。 

下 面 是 各 个 浏览 器 中 最 第 用 的 工具 

口 Firefox: 特别 流行 的 插件 a ( http://getfirebug.com ) 。 此 外 ，Web Developer ( http:// 
chrispederick.com/work/web-developer/) 是 稍 有 区 别 的 一 种 工具 ， 但 也 非常 好 用 ; 在 同 
一 个 链接 的 页 面 上 ， 也 可 以 下 载 用 于 Chrome 的 版 本 。 

O Internet Explorer: IE8+ 有 内 置 的 开发 工具 Developer Tools (http://msdn.microsoft.com/ 
en-us/ie/aa740478 ) 对 于 IE6 和 IE7, 可 以 安装 Internet Explorer Developer Toolbar ( www. 
microsoft.com/download/en/details.aspx?id-18359 ) 。 

O Opera: Dragonfly ( www.opera.com/dragonfly/ ) 。 

O Safari: Web Inspector ( http://developer.apple.com/technologies/safari/developer-tools.html ) 。 
网 上 还 有 演示 如 何 使 用 这 些 工具 的 文档 和 视频 。 


在 20.3 节 和 20.4 $ PAAA Firebug 和 Web Inspector 的 实例 。 


20.2 ”检查 常见 错误 : 一 般 问题 


浏览 需 之 间 的 差异 可 能 是 由 一 些 不 明显 
的 浏览 需 漏 洞 造成 的 ， 也 可 能 是 由 于 使 用 新 
技术 造成 的 ， 但 更 常见 的 则 是 出 于 一 些 简单 
的 问题 。 每 个 人 在 从 新 手 到 专家 的 道路 上 难 
免 会 犯 一 些 低 级 错误 。 例 如 ， 你 有 可 能 认为 
问题 出 在 代码 上 ， 从 而 花 了 大 量 时 间 进 行 调 
试 ， 最 后 才 发 现 你 修改 的 是 一 个 文件 ， 上 传 
和 碍 看 的 却 是 服务 需 上 的 另 一 个 文件 ! 

下 列 建 议 中 的 大 多 数 适 用 于 使 用 网 站 在 
服务 右上 的 URL 对 网 站 进行 测试 的 情形 。 


查 检 笼统 的 常见 错误 

口 根据 20.5 节 的 描述 ,对 代码 进行 验证 。 
这 是 一 个 很 好 的 起 点 ， 因 为 这 样 就 能 
排除 代码 语法 相关 的 错误 了 。 

口 确保 已 上 传 要 测试 的 文件 。 

口 确保 上 传 的 文件 的 位 置 是 正确 的 。 

口 确保 输入 的 URL 与 要 测试 的 文件 是 对 












































应 的 。 如 果 要 查看 的 页 面 是 从 男 一 个 
页 面 跳 转 过 来 的 ， 确 保 链 接 中 的 URL 
与 页 面 的 文件 名 和 位 置 是 完全 匹配 的 。 

口 确保 上 传 文件 之 前 已 经 进行 了 保存 ( 包 

括 最 新 修改 ) 。 

口 确保 上 传 了 所 有 辅助 文件 (包括 CSS、 

图 像 、 音 乐 、 视 频 等 ) 。 

口 确保 URL 的 大 小 写 与 文件 名 的 大 小 写 

是 完全 匹配 的 。 (这 也 是 推荐 全 部 使 

用 小 写字 母 的 原因 ， 这 样 做 可 以 降低 

输入 URL 时 产生 错误 的 可 能 性 一 一 既 
针对 网 站 开发 人 员 , 也 针对 访问 者 。) 
确保 文件 名 中 没有 使 用 空格 〈 应 使 用 
短 横 线 代 蔡 空格 分 隔 单词 ) 。 

口 如 果 在 以 前 的 测试 中 曾 禁 用 某 项 浏览 
器 功能 (AN JavaScript LFF) ， 确 保 
重新 启用 这 些 功 能 。 

口 确保 问题 不 是 出 自 浏览 器 本 身 。 对 于 
这 一 点 ， 最 简单 的 方法 就 是 换个 浏览 
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口 在 接 下 来 的 两 节 里 ， 我 会 介绍 如 何 检 
ft HTML 和 CSS 中 的 常见 错误 。 


20.3 ”检查 常见 错误 : HTML 
有 了 时， 问题 出 现在 HTML 中 。 


aS HTML 常见 错误 的 方法 
口 很 容易 出 现 一 两 个 输入 错误 ， 如 图 
20.3.1 所 示 。 确 保 所 有 的 拼写 都 是 正 

















当 的 字符 引用 。 
口 确保 属性 值 是 用 直 引 号 而 不 是 曲 引 号 
包围 的 。 如 果 属 性 值 是 用 双 引 号 包围 
的 (这 也 是 惯例 ) ， 则 属性 值 中 可 以 
有 单 引 号 ， 如 图 20.3.3 所 示 。 如 果 属 
性 值 本 身 包 含 双 引 号 ， 则 应 使 用 字符 
引用 ， 如 图 20.3.4 所 示 。 





















































«img src-"jungle.jpg" width-"325" height="275" 
> alt-"Llumi's jungle" /> 














确 的 ， 属性 的 值 都 是 有 效 的 ， 如 图 
20.3.2 所 示 。 使 用 HTML 3S üE s T LA 
查 出 这 类 错误 ， 从 而 能 迅速 地 改正 ( 参 
见 20.5 节 )。 











«img scr-"woody.jpg" width-"200px" 
— height-"150px" alt-"Woody the cat" /> 











图 20.3.1 你 能 找 出 问题 吗 ? 我 将 src 拼 错 了 ， 还 在 
width 和 height 的 值 中 使 用 了 单位 。 如 果 你 没有 注意 
到 这 些 错 误 ， 可 以 使 用 HTML 验证 器 。 它 们 可 以 标 
出 这 类 输入 错误 ， 从 而 节省 发 现 这 些 错 误 的 时 间 





























«img src-"woody.jpg" width-"200" 
> height-"150" alt-"Woody the cat" /> 











E 20.3.2 在 正确 的 版 本 中 ，src 的 拼写 是 正确 的 ， 
width 和 height 的 值 中 也 去 掉 了 px 


OQ 留心 元 素 的 舰 套 。 例 如 ， 如 果 先 开始 
<p>， 再 使 用 <em> ， 就 要 确保 «/em 结 
束 标 记 位 于 最 后 的 </p> 之 前 。 

O 如 果 重 音字 符 或 特殊 符号 没有 正常 显 
示 ， 要 确保 文档 head 元 素 开 始 后 有 
«meta charset="utf-8" /> 语句 (如 
果 不 使 用 UTF-8， 也 可 以 使 用 其 他 恰 
当 的 字符 编码 ) ， 同 时 确保 文本 编辑 
器 是 使 用 与 之 相同 的 编码 保存 HTML 
文件 的 。 如 果 还 有 问题 ， 试 着 使 用 恰 















































E 20.3.3 ”如 果 属 性 值 包含 单 引号 ， 可 以 照常 用 双 
引号 包围 属 性 值 








«img src-"cookie-the-cat.jpg" width="250" 
— height-"200" alt-"Cookie's saying, 
—> &quot;Enough!&quot;" /> 

















E 20.3.4 ”如 果 属 性 值 包含 双 引 号 ， 属 性 值 里 的 双 
引用 号 就 应 使 用 字符 引用 
口 确保 所 有 元 素 都 有 正确 的 开始 标记 和 
结束 标记 。 同 时 ， 不 要 对 空 元 素 使 
用 分 开 的 开始 标记 和 结束 标记 ， 如 图 
20.3.5 所 示 。( 从 技术 上 说 ， 即 便 省 
结束 标记 ， 或 者 对 空 元 素 添 加 结束 
标记 ,浏览 器 也 能 正确 地 显示 ,但 最 

好 还 是 严谨 一 些 。) 






































«img src-"jungle.jpg" width-"325" height="275" 
> alt-"Llumi's jungle"»«/img» 











E 20.3.5 不 要 对 空 元 素 (如 img) 包含 结束 标记 ， 

HTML 验证 器 会 将 这 个 例子 标记 为 错误 
口 使 用 浏览 器 开发 工具 可 以 在 浏览 器 解 
析 文 档 结 构 之 后 对 结构 进行 审查 ， 
如 图 20.3.6 所 示 ， 将 它 与 你 预期 的 
元 素 舱 套 进 行 比较 ， 如 图 20.3.7 所 
示 。 这 可 以 帮 你 快速 定位 标记 格式 
不 正确 、 元 素 未 闭合 或 过 早 闭 合 等 
错误 。 
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三 | 口 | xi 
File Edt View History Bookmarks Tools Help 


Hi 


Malformed start tag - Mozilla Firefox 





| {C} Malformed start tag 





We've really got a pro^lee hara 
y gota p asy 


Forward 


Bookmark This Page 
Save Page As... 
Send Link... 


View Backaround Image 
Select All 


View Page Source 
View Page Info 


Web Developer » 





20.3.6 ”如 果 在 Firefox 中 安装 了 Firebug, "JV 
右 击 内 容 ( 如 果 使 用 Mac， 则 在 按 下 Control 键 的 
同时 单 击 ) ， 选 择 Inspect Element。 这 时 ， 就 会 在 
Firebug 中 显示 内 容 的 底层 结构 ( 参见 图 20.3.7 ) 








eoo Malformed start tag 
1 图 Malformed start tag lt ——— 


We've really got a problem here. 





| qi t| | Cons HTML | css script pom (P eco 
i$ | Edit fm p body html Style» | Computed Layout DOM 
«IDOCTYPE html> 
Pen": This element has no style rules. You can 
Ay Tala in create a rule for it 
<head> 
Y <body> 
Veot 
We've. 
<fm>really got a problem here. < 
</p> 
</body> 
/htnl» 











E] 20.3.7 TE Firebug 中 审查 段落 时 ，Firefox 在 
遇 到 图 20.3.8 中 有 错 的 代码 时 会 将 HTML 理解 成 
<p>We ve «fm»really got a problem here«/fm».«/p» 














«p»We' ve «fm»really«/em» got a problem here. 
2 </p> 














20.3.8 en 元 素 在 开始 标记 中 有 一 个 输入 错误 。 
Firefox 等 浏览 器 解析 HTML 时 ， 会 试 着 修复 这 
个 错误 ， 并 在 显示 页 面 时 改变 文档 的 底层 结构 ， 
如 图 20.3.7 所 示 。HTML 验证 器 也 会 将 此 标 为 


错误 





20.4 检查 常见 错误 : CSS 


尽管 CSS 的 语法 相当 简单 明了 ， 但 它 也 
有 一 些 常见 的 陷阱 ， 特 别 是 如 果 你 习惯 了 编 
© HTML 的 话 。CSS 验证 右 可 以 将 如 本 节 讨 
论 的 这 类 错误 标示 出 来 ， 因此， 在 查看 CSS 
以 寻找 错误 之 前 ， 要 先 对 样式 表 进行 验证 。 




















检查 CSS 常见 错误 的 方法 

口 确保 使 用 冒号 ( : ) 分 隔 属性 和 值 ， 而 
不 是 像 在 HTML 中 那样 使 用 等 号 ， 如 
图 20.4.1 和 图 20.4.2 所 示 。 


















































p { 
font-size-1.3em; 
} 
图 20.4.1 WWE, 改变 用 等 号 分 阳 属 性 和 值 的 习惯 
很 难 
pi 
font-size: 1.3em; 
} 























图 20.4.2 好 多 了 。 属 性 和 值 之 间 应 该 使 用 冒 
在 冒号 之 前 或 之 后 添加 额外 的 空格 不 会 产生 影响 ， 
但 通常 在 冒号 之 后 加 上 一 个 空格 
口 确保 使 用 分 号 ( ; ) 结束 每 个 属性 -- 值 
对 ( 即 声明 ) 。 确保 没有 多 余 的 分 号 ， 
如 图 20.4.3 和 图 20.4.4 所 示 。 
口 不 要 在 数字 和 单位 之 间 添 加 空格 ， 如 
图 20.4.5 和 图 20.4.6 所 示 。 

















pi 
font-size: 1.3em font-style: italic;; 
— font-weight: bold; 

} 


20.4.8 又 错 了 。 每 个 属性 — 值 对 之 间 必 须 有 且 
只 能 有 一 个 分 号 。 这 里 ， 有 一 处 少 写 了 一 个 分 号 ， 
另 一 处 多 写 了 一 个 分 号 
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[* 还 是 有 问题 ， 但 更 容易 发 现 问题 了 */ 
Pi 

font-size: 1.3em;; 

font-style: italic 

font-weight: bold; 
} 


/* 这 是 正确 的 版 本 */ 
Pi 
font-size: 1.3em; 
font-style: italic; 
font-weight: bold; 
} 

















图 20.4.4 如果 每 个 属性 - 值 对 都 独占 一 行 ， 错 误 
就 更 容易 发 现 了 ， 因 为 这 样 分 号 就 不 会 混在 一 大 片 
属性 、 值 和 冒号 之 中 了 














pt 


font-size: .8275 em; 











图 20.4.5 又 错 了 。 不 要 在 数字 和 单位 之 间 添 加 空格 





pt 


font-size: 


} 


.8275em; 








204.6 这 次 对 了 。 注 意 冒 号 和 值 之 间 的 空格 是 

可 选 的 (但 通常 包含 这 个 空格 ) 

口 不 要 忘 了 后 括号 。 

口 确保 使 用 可 接受 的 值 。 像 font-style: 
none; 这 样 的 声明 是 无 效 的 ， 因 为 该 属 
性 的 空 值 为 normal。 附 录 B Jy CSS JE 





























性 和 值 的 完整 列表 。 
O 使 用 嵌入 样式 表 时 ， 不 要 忘 了 </styley 
结束 标记 。 


口 确保 HTML 文档 正确 地 指向 CSS 文 件 ， 
H. URL 指向 所 需 的 文件 。 

留意 选择 器 之 间 的 空格 和 标点 符号 。 
口 确保 浏览 器 支持 你 编写 的 代码 ， 尤 其 
是 CSS3 代码 ， 因 为 浏览 器 在 CSS3 成 











长 的 过 程 中 也 在 不 断 演变 。 关 于 浏览 

器 对 特定 属性 和 值 的 支持 情况 ， 人 参见 

附录 B 中 提供 的 URL。CSS 验证 器 

无 法 判断 浏览 器 是 否 支持 某 个 CSS 特 

性 ， 但 如 果 输 入 的 选择 器 、 属 性 或 值 

是 CSS 中 不 存在 的 ， 验 证 器 仍 会 给 出 
提示 。 

口 使 用 浏览 器 开发 工具 审查 浏览 器 所 解 
析 的 样式 规则 以 及 当前 计算 出 来 的 元 
素 样式 ， 从 而 快速 地 查 出 哪些 代码 没 
有 按照 预期 进行 解析 ， 或 者 查看 所 应 
用 的 特殊 性 规则 ， 如 图 20.4.7 所 示 C 
见 “浏览 器 开发 工具 ” ) 。 


























© O O Web Inspector 一 http://bruceontheloo 


Q. gc 


geecom heirs is /examples /chapter- 12 /finished-page.html 


ISAE 











tules 











DO A mm 


20.4.7 我 使 用 Safari 的 Web Inspector 对 代码 
片段 <h1>Recent Entries«/hi» 进行 了 审查 。 应 用 

于 该 元 素 的 CSS 显示 在 右 侧面 板 。font-size 设置 
上 有 一 条 删除 线 ， 表 示 这 条 声明 被 另 一 条 规则 ( 显 
示 在 上 面 ) 覆盖 了 。 这 样 的 结果 是 我 在 这 个 例子 中 
想 要 的 效果 ， 但 你 可 以 使 用 这 种 技术 跟踪 样式 没有 
按照 预期 进行 应 用 的 原因 。 还 可 以 在 右 侧面 板 中 对 
样式 进行 编辑 ， 以 测试 不 同 的 CSS 











































































































20.5 ”验证 代码 


发 现 页 面 上 的 错误 ( 如 图 20.5.1 所 示 ) 的 
一 种 重要 方法 就 是 使 用 验证 右 ， 如 图 20.5.2 
所 示 。HTML 验证 器 可 以 对 代码 和 语言 规则 
进行 比较 ， 并 将 其 发 现 的 不 一 致 的 情况 显示 
为 错误 或 警告 。 它 还 可 以 提示 语法 错误 ， 无 
效 的 元 素 、 属 性 和 值 , 以 及 错误 的 元 素 藤 套 ( 如 








340 第 203k ”测试 和 调试 网 页 








20.5.3 所 示 ) 。 它 无 法 判断 内 容 是 不 是 由 
最 能 描述 它 的 元 素 进 行 标记 的 ， 因 此 编写 语 
义 化 的 HTML 还 得 靠 你 自己 (参见 1.2 节 ) 。 
CSS 验证 需 的 工作 原理 也 是 类 似 的 。 








Mary Anna, the Iguana - Mozilla Firefox 
Ele Edt View History Bookmarks Tools Help 
| Ll Mary Anna, the Iguana + 


{jÈ | LI. bruceontheloose.comhtmlcssjexamplesichapter- 全 ~ 











e] ($ sove 月 | 会 | 











Mary Anna, the Iguana 


There once was an 
iguana 

z whose name was 

Í Mary Anna 

her skin was so dry 
that she'd have to cry 

Here's some cream: would you 
please put it onna? 








图 20.5.1 图 像 右边 的 文字 本 不 该 这 么 大 。 我 已 
经 检查 了 CSS， 问 题 不 是 出 于 设置 了 很 大 的 font- 





size 值 。 问 题 出 在 哪儿 呢 


将 页 面 放 到 万 维 网 上 之 前 ， 不 需要 确 
保 它 们 通过 验证 器 的 检查 ， 完 全 没有 错误 。 
实际 上 ， 大 和 多数 网 站 都 有 一 些 错误 。 而 且 ， 
W3C 的 CSS 验证 器 会 将 用 于 属性 名 称 的 厂商 
前 级 标记 为 错误 ， 但 这 并 不 意味 着 你 应 该 将 
M RD RR (关于 厂商 前 
级 ,参见 第 14 章 ) 。 
浏览 器 可 以 处 理 很 多 类 型 的 错误 C 同时 
忽略 一 些 其 他 的 错误 ) ， 从 而 以 它们 能 实现 
的 最 佳 方 式 将 页 面 呈现 出 来 。 因 此 ， 即 便 页 
面 在 验证 时 有 错误 ， 也 可 能 看 不 出 来 。 不 过， 
有 时 错误 会 直接 影响 页 面 的 显示 ( 如 图 20.5.1 
所 示 ) 或 行为 。 因 此 ， 应 该 使 用 验证 器 尽 可 
能 地 排除 代码 中 的 错误 。 
验证 器 能 找到 的 错误 的 示例 参见 20.3 节 
和 20.4 节 。 

















验证 代码 的 步骤 
(1) 首先 使 用 http://html5.validator.nu( 参见 
图 20.5.2 和 图 20.5.3) 或 W3C 的 http://validator. 
w3.org 对 HTML 进行 检查 。 更 多 信息 参见 头 
两 条 提示 。 





Hle Edt View Hstory Bookmarks  Eob Help 
| M vaidatornu (OHTHLS validator * 











€ J [M hmsvaidatonu 








Validator.nu (X)HTMLS Validator (Living Validator 
Validator Input 





[Address  Efhtp//bruceontheloose.com/htmicss/examples/chapter-20/mary-anne-error html 
T^. Show Image Report 
网 Show Source 


VANGE 


About this Service * More options 








20.5.8 ”将 需要 检查 的 URL 粘贴 到 Address (地 
HE) 字段 。 选 择 Show Source ( 显示 源 代 码 ) 选项 

(在 默认 情况 下 是 未 选中 的 ) ， 这 样 HTML 源 代 
码 就 会 出 现在 验证 需 找 到 的 错误 的 下 方 ， 有 错误 的 
突出 显示 











HTML 片段 会 








arks 
ARS kdeton results For htp:lfruce... | er] = 
[M nr ornujPdoc=httpse3hse2Fsk2Fbruceontheloose.com 7 - |] [888 - coooe 月 | 会 | 











1. Error: Heading cannot be a child of another heading. 
s, 28 
the Iguan. «ing 
Error: Element p not allowed as chid of element hl in this context. (Suppressing further errors from this subtree) 
Lioine 1 


ana" /> xi 
Contexts in which element p may be used: 
Where tow content is expected. 
3, Error: Endtag for body seen, but there were unclosed elements. 
Jine 1 n1: to ine 19, column 7 
fna? «/pi fhem 
4. Error Unclosed element h1. 


the Iguan «ing 








L 


图 20.5.8 在 第 9 行 发 现 错误 ， 原 因 是 没有 使 用 
</h1> 结束 标记 ， 错 误 地 加 上 了 男 一 个 <h1> 开始 标 
记 。 其 他 的 错误 都 是 由 第 一 个 错误 引起 的 ， 因 此 只 
要 修复 了 这 个 错误 ， 页 面 就 没有 任何 错误 了 
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(2) 修复 标 出 来 的 HTML 错误 , 保存 修改 。 
需要 的 话 ， 将 文件 再 次 上 传 到 服务 器 ， 再 重 
复 第 (1) 步 。 

(3) 可 以 使 用 http;//jigsaw.w3.org/css-validator/ 
检查 CSS 错误 。 如 果 样 式 表 包含 CSS3 特性 ， 
一 定 要 在 Profile( 配置 ) 下 拉 菜 单 中 选择 “CSS 
level 3” (CSS 版 本 3 ) ， 如 图 20.5.4 所 示 。 
否则 ， 验 证 器 会 标示 出 比 实际 多 的 错误 。 





























ByURI — Byfile upload 


By direct input 


Validate by URI 
Enter the URI of a document (HTML with CSS or CSS only) you would like validated 





Address: 


~ More Options 












Profile: [CSS level 21 Z] Medium: All zi 
[N ofile 
Warnings: Is ma eds DRE Defaut z 
[CSS level 2.1 
[sva 
|sve Basic 
[SVG tiny Check 
| Mobile. 
|ATSC TV profile 
[TV profile. zi 











20.5.4. 在 默认 情况 下 ， 验 证 器 选择 的 配置 为 

"CSS level 2.1" (CSS 版 本 2.1) 。 如 果 样 式 表 
中 包含 CSS3 ， 则 应 选择 “CSS level 3” AW, 
验证 器 会 显示 更 多 的 错误 ， 因 为 CSS 2.1 不 包含 
CSS3 的 许多 特性 











W3C 的 验证 器 ( http;//validator.w3.org/ ) 
使 用 的 是 http://html5.validator.nu/ 提供 的 验证 
引擎 ， 因 此 使 用 这 两 种 都 可 以 。W3C 的 错误 
消息 更 易 读 ， 但 不 会 对 HTML 源 代 码 的 错误 
部 分 突出 显示 。 


可 以 通过 输入 URL ( 参见 图 20.5.1 ) 、 
上 传 HTML 文件 以 及 将 HTML 粘贴 到 验证 器 
三 种 方式 对 HTML 进行 验证 。 如 果 使 用 上 传 
或 复制 粘贴 的 方式 ,不必 将 文件 上 传 到 服务 
器 就 可 以 进行 检查 了 。 


一 个 HTML 错误 可 能 导致 多 个 验证 
器 报错 结果 。 例 如 ， 缺 少 一 个 结束 标记 会 导 
致 多 条 错误 消息 (参见 图 2053) 。 如 果 修复 
了 这 个 结束 标记 的 问题 ， 所 有 这 些 后 续 错 误 
就 都 不 存在 了 。 因 此 ， 应 该 按照 从 上 往 下 的 
顺序 , 一 次 修复 少量 错误 后 就 立刻 再 次 验证 ， 
看 看 其 他 的 问题 是 否 也 已 解决 。 


HTMLS 对 代码 的 格式 要 求 是 很 宽松 
的 。 例 如 ， 它 并 不 关心 像 img 这 样 的 空 元 素 
的 结束 方式 ， 因 此 <img src-"iguana.jpg" 
/> fe «img 
src-"iguana.jpg" alt-"Mary Anna, the 
Iguana"» 都 是 有 效 的 。 验 证 器 无 法 判断 代码 在 
这 些 方面 是 不 是 一 致 的 。 如 果 你 想 确保 代码 的 
一 致 性 ， 可 以 将 HTML 页 面 提交 到 HTML Lint 
( http;//lint.brihten.com/html/) 。 它 可 以 检查 空 
元 素 是 否 结束 ， 开 始 标记 和 结束 标记 是 否 为 小 
写字 母 ， 属 性 是 否 为 小 写字 母 ， 等 等 。 


alt-"Mary Anna, the Iguana" 


20.6 测试 页 面 


即便 代码 通过 了 验证 ， 页 面 可 能 仍然 不 
像 预期 的 那样 工作 ， 如 图 20.6.1 所 示 ， 或 者 
可 能 在 一 个 浏览 锅 中 是 正常 工作 的 ， 在 另 一 
个 浏览 器 中 却 有 问题 。 在 不 同 的 浏览 器 和 平 
台 上 对 页 面 进行 测试 是 很 重要 的 〈 参 见 本 节 
末尾 的 “应 该 在 哪些 浏览 器 中 进行 测试 ”) 。 





测试 HTML 页 面 

(1) X} HTML 和 CSS 进行 验证 (参见 20.5 
节 ) ， 作 出 必要 的 修改 。 

(2) 打开 浏览 器 ， 选 择 File 一 Open File。 
找到 要 测试 的 网 页 ， 点 击 Open。 页 面 将 出 现 
在 浏览 需 中 。 

(3) 检查 整个 页 面 ， 确 保 与 你 希望 看 到 的 
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完全 一 样 。 例 如 : 

口 格式 与 期 望 的 是 否 一 致 

口 链接 的 URL 是 否 指向 了 正确 的 页 面 或 

资源 (可 以 通过 激活 链接 并 查看 结果 

对 URL 进行 测试 ) 

O CSS 文件 是 否 引 用 正确 (参见 图 20.6.1、 

图 20.6.2 和 图 20.6.3 ) 

a 所 有 的 图 像 都 出 现 了 吗 ? 它们 的 位 置 
和 对 齐 方 式 是 对 的 吗 ? 

(4) 在 不 关闭 浏览 器 中 页 面 的 情况 下 ， 打 
开 有 关 的 HTML 或 CSS 文 档 ,作出 必要 的 改动 。 

(5) 保存 修改 。 

(6) 切换 到 浏览 器 ,刷新 页 面 并 查看 所 作 
的 改动 。 

(7) 重复 第 (3) 步 至 第 (6) 步 ， 直 到 你 对 网 
页 满意 为 止 。 即 便 要 测 很 多 次 ， 也 不 要 感到 
iHi. 

再 次 对 代码 进行 验证 ， 确 保 没 有 引入 任 
何其 他 的 错误 。 

(8) 从 第 (2) 步 开始 ， 在 其 他 的 浏览 器 中 
执行 同样 的 测试 流程 ， 直 到 满意 并 认为 页 面 
做 好 了 发 布 准备 为 止 。 

(9) 将 文件 上 传 至 服务 器 。 

(10) 回 到 浏览 器 ， 在 地 址 栏 中 输入 页 面 
的 URL, 按 下 回 车 键 ,页 面 将 出 现在 浏览 器 中 。 

(11) 再 次 对 页 面 进 行 检 查 ， 确 保 没 有 任 
何 问 题 ( 现在 ， 页 面 位 于 服务 器 上 ) 。 同 时 ， 
如 果 访 问 者 可 能 通过 移动 设备 访问 网 站 的 话 ， 
别 忘 了 在 移动 设备 上 对 其 进行 检查 。 


推荐 在 将 文件 上 传 至 服务 器 之 前 先 对 
网 站 的 本 地 版 本 进行 完全 测试 。 上 传 之 后 ， 
针对 服务 器 上 的 版 本 ， 再 次 对 网 站 进行 完全 
测试 (不管 在 开发 过 程 中 对 本 地 版 本 做 过 多 
少 测试 工作 ) ， 因 为 这 是 访问 者 会 看 到 的 
版 本 。 



















































































Mary Anna, the Iguana - Mozilla Firefox 二 |D| xl 
File Edt View History Bookmarks Tools Help 
| |] Mary Anna, the Iguana Rr z 





Mary Anna, the Iguana 





There once was an iguana 
whose name was Mary Anna 

her skin was so dry 

that she'd have to cry 

Here's some cream: 

would you please put it onna? 














E 20.6.1 这 个 页 面 通过 了 验证 , 但 它 看 上 去 并 不 
像 预期 的 那样 。 问 题 出 在 哪儿 ( 参见 图 20.6.2 ) 

















«IDOCTYPE html» 
«html lang-"en"» 
«head» 
«meta charset-"utf-8" /» 
«title»Mary Anna, the Iguana«/title» 
«link rel="stylesheet" href= 
— "css/style.css" /> 











«/head» 
«body» 
«/body» 
«/html» 
20.6.2 ”问题 出 在 指向 CSS 文件 的 链接 上 一 一 


CSS 文件 的 名 称 为 Styles.css， 而 这 里 指向 的 却 是 
Styles.css。 浏 览 器 无 法 找到 CSS， 因 此 对 页 面 的 显 
示 是 有 问题 的 (参见 图 20.6.1) 。 改 正 了 代码 中 的 
文件 名 后 ， 样 式 表 就 被 加 载 进来 了 























ED 再 提醒 一 次 ， 如 果 可 能 的 话 ， 要 在 多 
种 平台 上 的 多 个 浏览 器 中 对 HTML 文档 进行 测 
试 ( 参 见 “ 应 该 在 哪些 浏览 器 中 进行 测试 ”) 。 
你 无 法 预知 访问 者 会 使 用 哪 种 浏览 器 或 计算 机 。 
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Mary Anna, the Iguana - Mozilla Firefox 


Elle Edit View History Bookmarks Tools Help 


| B Mary Anna, the Iguana | * * 
Mary Anna, the Iguana 





关于 移动 设备 浏览 器 测试 ,参见 12.3 节 。 





如 果 浏 览 器 中 显示 的 是 HTML 代码 
而 不 是 页 面 ， 要 确保 文件 使 用 的 是 .html 或 
htm 扩展 名 (而 不 是 像 .txt 这 样 的 扩展 名 ) 。 





CJES 有 时 候 ， 页 面 上 的 问题 并 不 是 你 的 
错 ， 尤 其 是 样式 上 的 问题 。 在 认为 问题 出 在 
代码 上 之 前 ， 一 定 要 确保 浏览 器 对 遇 到 问题 
的 特性 是 支持 的 。 附 录 A 和 附录 B 中 有 关于 
显示 正确 HTML 和 CSS 特性 的 浏览 器 支持 情况 的 资源 
链接 。 





图 20.6([3 现在， 指向 CSS 的 链接 改正 了 ， 页 面 














应 该 在 哪些 浏览 器 中 进行 测试 
通常 ， 大 多 数 开 发 网 站 的 人 士 会 在 以 下 浏览 器 中 对 网 站 进行 验证 : 

O Chrome 的 最 新 版 本 。Chrome 会 在 你 的 计算 机 上 自动 进行 更 新 ， 大 约 每 隔 六 周 就 会 发 

布 一 个 新 的 版 本 。Chrome 的 下 载 地 址 为 www.google.com/chrome., 

U Firefox 3.6+, Firefox 同 Chrome 一 样 , 发 行 周 期 也 很 快 , 不 过 其 更 新 并 不 是 自动 进行 的 。 
Firefox 在 版 本 3.6 之 后 已 经 有 很 多 版 本 发 布 出 来 了 ,因此 3.6 不 再 是 优先 选择 的 版 本 了 。 
Firefox 的 下 载 地 址 为 www.firefox.com。 

O Internet Explorer 7, IE 85 F 2X x AE 7j http;//windows.microsoft.com/en-US/interet-explorer/ 

downloads/1e ; 

O Safari 5+。 在 大 多 数 情况 下 ， 对 于 该 浏览 器 ， 只 需要 在 其 Mac 版 本 中 进行 测试 。 尽 管 
Safari 也 有 Windows 版 本 ， 但 用 户 非常 少 ， 因 此 没有 专门 为 此 测试 的 必要 。Safari 的 
下 载 地 址 为 www.apple.com/safari/ ; 

口 Opera 11+, Opera 在 世界 上 很 多 地 区 都 有 少量 的 市 场 份额 ， 不 过 它 对 HTML5 的 支持 
很 好 。Opera 的 下 载 地 址 为 WwWw.opera.com/。 
8T HTMLS, CSS3, t$ JavaScript 引擎 以 及 其 他 技术 的 出 现 ， 浏 览 器 的 处 理 能 力 在 

近 几 年 有 飞速 的 增长 。 这 里 所 列 的 大 多 数 浏览 器 对 CSS 的 呈现 是 相似 的 (大 多 数 例 外 的 情况 

都 是 关于 CSS3 的 ) Internet Explorer 7 和 8 比 其 他 所 列 的 浏览 器 要 旧 得 多 ， 因 此 也 更 容易 

产生 差异 和 错误 。 因 此 ， 如 果 你 的 网 站 在 IE7 和 IE8 中 的 样子 同 在 现代 浏览 器 中 的 样子 相 比 

有 一 点 不 同 ， 也 是 可 以 接受 的 。 

那么 ， 如 何 对 待 Internet Explorer 6 呢 ? 由 于 JE6 存在 大 量 的 怪异 处 理 方式 及 错误 ， 它 已 

成 为 设计 人 员 和 开发 人 员 多 年 以 来 的 眼中 上 果 。 不 过 值得 庆幸 的 是 ， 它 的 市 场 份额 已 经 大 幅 缩 

水 了 (参见 www.ie6countdown.com ) 。 现 在 ， 网 站 拥有 者 为 网 站 能 在 IE6 中 正常 运转 而 付出 

额外 精力 的 情况 已 经 变 少 了 ， 但 是 否 这 样 做 取决 于 网 站 的 访问 者 。 一些 大 的 公司 仍 不 愿 完全 











344 第 20 章 测试 和 调试 网 页 





抛弃 IE6， 但 人 们 通常 不 再 用 它 了 ， 因 此 为 IE6 调整 网 站 所 花 的 大 量 精力 不 会 带 来 太 多 收益 。 
但 是 ， 了 解 你 的 访问 者 是 必要 的 。 在 世界 上 某 些 地 区 〈 如 亚洲 的 菜 些 地 方 ) ， 还 有 大 量 的 
IE6 用 户 。 此 外 ， 一 些 大 型 组 织 也 使 用 IE6 作为 其 默认 浏览 器 。 

对 所 有 浏览 器 和 平台 的 用 户 都 具有 可 访 问 性 是 很 有 挑战 的 。 关 于 如 何在 各 种 浏览 器 (万 
Jt X Internet Explorer 的 各 个 版 本 ) 上 对 页 面 进行 测试 的 问题 ， 参 见 Addy Osmani 的 文章 

( http://coding.smashingmagazine.com/201 1/09/02/reliable-cross-browser-testing-part- 1 -internet- 

explorer/) 。 此 外 ， 如 果 你 的 朋友 和 家 人 使 用 你 没有 的 浏览 器 ， 他 们 也 可 以 帮 到 你 。 如 果 你 
的 时 间 和 资源 有 限 ， 需 要 缩小 测试 的 范围 ， 也 应 该 尽 可 能 地 在 Chrome 和 Firefox 的 最 新 版 本 
及 IE7+ 上 进行 测试 。 

浏览 器 市 场 的 发 展 日 新 月 异 一 一 你 阅读 到 这 一 段 话 的 时 候 ， 人 们 可 能 已 经 在 试用 这 些 浏 
览 器 更 新 的 版 本 了 。 不 过 ， 只 要 遵循 渐进 增强 的 原则 ， 你 的 网 站 就 可 以 为 旧 的 浏览 器 提供 简 
单 的 体验 ， 为 现代 浏览 器 提供 增强 的 体验 。 

鉴于 此 ，Yahool 推出 了 分 级 浏览 器 支持 (Graded Browser Support ) 的 概念 (http://yuilibrary. 
com/yui/docs/tutorials/gbs/ ) ， 并 将 这 个 概念 应 用 于 对 其 JavaScript 和 CSS 框架 YUI (www. 
yuilibrary.com ) 的 测试 。 该 观点 将 浏览 器 分 成 不 同 的 等 级 ， 不 同 的 等 级 定义 了 对 浏览 器 进行 
测试 时 的 预期 大 小 。 你 可 以 采取 这 种 方法 ， 在 你 的 项 目 中 对 浏览 器 进行 分 级 。 

Google 对 Google Apps 采取 的 方法 有 所 不 同 ， 该 方法 支持 大 多 数 浏览 器 的 最 新 的 两 个 版 
本 ( http;//googleenterprise.blogspot.com/2011/06/our-plans-to-support-modernbrowsers.html ) 。 
同 理 ， 不 同 项 目的 需求 可 能 不 同 。 





















































20.7” 当 图 像 不 出 现时 就 是 将 图 像 放 到 HTML 页 面 所 在 的 目 
录 。 这 样 就 只 需要 img 元 素 中 的 文件 
MAXL, ER EER BRAE, RAI 名 和 扩展 名 正确 就 可 以 了 ， 无 需 引 入 
么 都 不 显示 这 都 是 图 像 未 能 正确 加 载 的 路 径 信息 。 如 果 图 像 显示 出 来 了 ， 问 
标志 ， 如 图 20.7.1 和 图 20.7.2 Ro UA NK 题 很 可 能 就 出 在 路 径 上 。 不 过 ,将 图 
希望 显示 的 是 一 张大 蜥 蝎 的 照片 ， 那 么 不 管 像 放 在 HTML 文件 所 在 的 目录 并 不 好 ， 
出 现 上 述 哪 种 情况 都 是 邻 人 恼火 的 。 因为 这 样 的 话 ， 网 站 很 快 就 会 变 得 无 
修复 缺失 的 图 像 序 。 因 此 ， 在 测试 之 后 ， 要 将 图 像 从 
O 首先 检查 图 像 在 服务 器 上 的 文件 名 是 否 om a a 

与 ing 元 素 中 引用 的 名 称 严格 匹配 ， 包 pn ia beide db. 
pam mo nmi. 口 如 果 在 你 的 计算 机 上 查看 页 面 时 图 像 
D 不 要 在 文件 名 中 包含 空格 .参见 1.6 节 。 人 
口 确保 img 元素 的 src 属性 中 的 图 像 后 ， 图 像 却 没有 显示 出 来 ， 要 确保 已 











URL 是 正确 的 。 一 种 简单 的 测试 方法 经 将 图 像 上 传 到 了 服务 器 。 
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O 把 图 像 保存 为 PNG、JPEG 或 GIF 格 
式 了 吗 ? 如 果 是 的 话 ， 所 有 的 浏览 
都 能 显示 该 图 像 ， 如 果 保 存 为 BMP 或 
TIFF， 则 并 非 所 有 的 浏览 器 都 能 显示 
图 像 。 更 多 信息 参见 第 5 章 。 











<body> 
«hi»Mary Anna, the Iguana</h1> 


<p><img src-"Iguana.jpg" width-"220" height= 
— "165" alt-"Mary Anna, the Iguana" /» There 











— once was an iguana ...4/p» 
</body> 
</html> 
20.7.1 图 像 的 文件 名 为 iguanajpg， 但 在 





HTML 中 ， 引 用 的 却 是 Iguana.jpg ( UKS FEI 
开头 ) 。 因 此 ， 在 服务 器 上 检查 页 面 时 ， 图 像 不 会 
显示 (如 图 20.7.2 所 示 ) 





Mary Anna, the Iguana - Mozilla Firefox 
Fle Edt View History Bookmarks Jools Help 





| |] Mary Anna, the Iguana. 
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Mary Anna, the Iguana 


Mary Anna, the Iguana 








图 20.7.2 在 你 的 计算 机 上 ， 如 果 系 统 不 区 分 文件 
名 的 大 小 写 ， 页 面 看 起 来 就 没有 问题 。 但 将 页 面 发 
布 到 区 分 大 小 写 的 服务 器 上 以 后 , 便 无 法 找到 图 像 ， 
仅 显 示 alt 文本 





20.8 仍然 有 错误 


当 我 建议 你 休息 一 下 的 时 候 ， 不 要 认为 
我 的 建议 是 出 于 傲慢 。 有 时 候 ， 你 能 做 出 的 
最 佳 选择 就 是 暂时 将 问题 放 到 一 边 。 当 你 回 
头 再 进行 处 理 时 ， 答 案 可 能 就 明显 地 摆 在 你 
面前 。 如 果 没 有 ， 不 妨 看 看 以 下 补充 建议 。 

(1) 再 次 检查 输入 错误 。 再 次 对 代码 进行 
验证 (参见 20.5 节 ) 。 

(2) 首先 检查 简单 的 错误 。 在 查找 问题 的 
过 程 中 ， 先 检查 你 特别 了 解 的 地 方 ， 再 研究 
不 那么 熟悉 的 地 方 。 

(3) 简化 问题 。 回 到 页 面 能 正确 工作 的 最 
近 的 版 本 。 ( 为 此 ， 要 在 建立 页 面 的 过 程 中 
保存 页 面 的 副本 ， 从 而 在 必要 的 时 候 能 回 到 
历史 版 本 。) 再 在 每 次 一 点 一 点 地 添加 新 元 
素 的 过 程 中 对 页 面 进行 检查 。 

(4) 对 于 页 面 链接 到 的 资源 ( 如 CSS 图像、 
JavaScript 或 媒体 文件 ) ， 直 接 在 浏览 器 的 地 
址 栏 中 输入 资源 的 URL， 确 保 该 资源 确实 是 
存在 的 。 

(5) 再 次 阅读 本 章 一 一 你 可 能 在 第 一 次 漏 
卸 了 一 些 内容 ， 或 者 某 些 内 容 可 能 启发 你 。 

(6) 到 网 上 搜索 解决 方案 或 指导 意见 。 


Stack Overflow ( www.stackoverflow.com ) 和 






































SitePoint( www.sitepoint.com/forums/forumdisplay 
.php?40-design-your-site ) 便 是 两 个 例子 。 通 
过 在 网 上 搜索 ， 还 可 以 找到 其 他 的 资源 。 











本 章 内 容 

口 获得 域名 

口 为 网 站 寻找 主机 

口 将 文件 传送 至 服务 器 





当 你 完成 你 的 杰作 并 准备 好 将 它 展现 给 
公众 时 ， 必 须 将 页 面 传送 到 Web 主机 服务 需 
上 ， 人 们 才能 访问 这 些 页 面 。 

关于 上 传 文件 的 最 佳 方式 ， 你 可 以 联系 
Web 主机 提供 商 或 互联 网 服务 提供 商 ( Internet 
Service Provider, ISP) 。 通 常 ， 它 们 会 提供 
一 套 指南 ， 就 如 何 连接 到 他 们 的 服务 器 和 哪 
里 可 以 上 传 文件 的 问题 提供 说 明 。 

在 发 布 页 面 之 前 和 之 后 ， 要 确保 对 页 面 
进行 彻底 的 测试 。 更 多 细节 信息 参见 第 20 章 。 


21.4 获得 域名 


在 访问 者 能 够 看 到 你 的 网 站 之 前 ， 需 要 
为 网 站 关联 一 个 域名 ， 如 图 21.1.1 所 示 。 你 
可 以 注册 自己 的 域名 ， 并 找 一 个 Web 主机 存 
放 网 站 ， 这 样 ， 任 何人 都 可 以 在 浏览 器 中 访 
问 这 个 域名 (参见 21.2 节 ) 。 如 果 你 决定 换 
一 个 Web 主机 (或 者 主机 提供 商 欣 业 了 ) ， 
可 以 让 域名 指向 男 一 个 Web 主机 的 服务 器 ， 
而 所 有 的 URL 都 保持 不 变 。 














图 21.1.1 


只 有 特定 的 公司 才 是 可 信 的 域名 注册 商 
(这 个 界面 和 下 面 的 界面 均 来 自 www.namecheap. 
com， 选 择 此 域名 注册 商 没 有 代言 之 意 ) 。 你 可 以 














使 用 其 中 的 一 个 查询 你 想 使 用 的 域名 是 否 可 用 ， 也 
可 以 通过 Web 主机 提供 商 的 网 站 进行 检查 











获得 域名 的 步骤 

(1) 在 浏览 器 中 访问 某 个 域名 注册 商 ( 域 
名 注册 商 的 列表 参见 www.internic.net/alpha. 
html) ， 查 看 你 想 用 的 域名 是 否 可 用 ， 如 图 
20.1.2 所 示 。 ( 很 多 Web 主机 提供 商 也 提供 
在 其 网 站 上 查询 域名 是 否 可 用 的 服务 。 ) 

(2) 一 旦 找到 一 个 域名 ， 便 可 以 自行 注册 
或 通过 你 所 使 用 的 Web. 主机 提供 商 代为 注册 

( 自行 注册 更 为 常见 ) 。 不 同 域名 注册 商 的 

价格 不 一 样 ， 不 过 .com 域名 的 价格 通常 大 约 
为 每 年 10 美元 ( 其 他 类 型 的 域名 的 价格 可 能 
不 一 样 ) 。 有 的 Web 主机 提供 商 将 域名 注册 
作为 主机 服务 费 的 部 分 折扣 。 


要 让 网 站 在 别人 访问 URL 时 显示 出 


来 ， 需 要 先进 行 一 些 重要 的 配置 ， 这 些 内 容 
参见 下 一 节 的 “连接 域名 和 Web 主机 ”。 
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分 空间 ， 存 放 你 的 网 站 文件 ， 同 时 提供 其 他 


Popular Extensions 
相关 的 服务 ， 如 创建 同 域名 关联 的 电子 邮件 





catalancats.com Available 地 址 (如 yourname@yourdomain.com ) 。 
catalancats.net Available 有 很 多 公司 都 提供 网 站 托管 服务 。 其 中 ， 


大 部 分 公司 根据 其 服务 的 内 容 按 月 收取 费用 。 
有 的 公司 提供 免费 的 网 站 托管 服务 ， 但 要 求 
catalancats.cm Available 在 你 的 网 站 上 放置 他 们 的 广告 。 尽 管 你 可 以 
在 互联 网 上 搜索 Web 主机 提供 商 ， 但 还 是 推 


catalancats.org Available 

















回回 回回 回回 回回 图 





catalancats.mobi Available 
荐 你 向 使 用 某 种 主机 的 朋友 进行 咨询 一 一 抑 
aA m 或 某 位 值得 信赖 的 博 主 提 到 的 他 所 用 的 主机 
catalancats.biz Available 的 提供 商 。 
- 考虑 主机 提供 商 时 ， 除 了 价格 之 外 ， 还 
catalancats.info Available 要 考虑 以 下 几 件 事 件 。 
catalancats.tv Available 口 他 们 允许 网 站 使 用 多 大 的 磁盘 空间 ? 
FUERO VER 不 要 为 超出 需要 的 部 分 付费 。 话 虽 如 


JL, 通常 连 最 基本 的 账户 也 拥有 足够 
catalancats.co Available 的 空 间 , dd ft , HTML X 件 is 用 的 空 
catalancats.me Available 间 非 常 小 ， 而 图 像 、 音 频 和 视频 文件 
则 依次 占用 更 大 的 空间 。 
他 们 允许 每 个 月 使 用 多 大 的 数据 传输 
catalancats.org.uk Available 量 (带宽 ) 。 这 个 值 代表 的 是 发 送 给 
访问 者 的 数据 (包括 HIML、CSS、 
图 像 、 媒 体 文 件 等 ) 的 总 大 小 ， 而 不 


catalancats.co.uk Available 








catalancats.me.uk Available 


回回 回回 回 
























































是 允许 在 服务 器 存储 的 空间 的 天 小 。 
因此 ， 如 果 你 预计 访问 者 会 从 你 的 网 
站 访问 大 量 的 大 文件 ， 就 需要 更 大 的 
月 传输 配额。 
E 21.1.2 ”如果 域 名 是 可 用 的 ， 就 可 以 通过 你 查询 O 他 们 有 应 对 大 访问 量 、 防 止 网 站 崩溃 
We et ibus 口 可 以 使 用 域名 创建 多 少 邮箱 〈 主机 提 
catalancats.com 这 个 域名 是 可 用 的 ) 供 商 通常 提供 很 多 个 。 ) 




















l 口 账 户 可 以 为 多 个 域名 提供 主机 吗 ? 是 
21.2 为 网 站 寻找 主机 否 需 要 为 每 个 站 点 建立 独立 的 账户 ? 
除非 你 有 自己 的 服务 器 ， 否 则 很 有 可 能 口 他 们 提供 哪 种 技术 支持 ? 是 通过 电 
需要 为 你 的 网 站 寻找 主机 并 支付 一 定 的 费用 。 Wi. ME, GRREEEAROEUR, ei 
Web 主机 提供 商 可 以 提供 其 服务 器 上 的 一 部 BB US 
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大 量 的 支持 信息 吗 ? (在 成 为 他 们 
的 客户 之 前 ， 可 以 检查 这 些 内 容 的 
数量 。 ) 

口 他 们 多 久 备份 一 次 服务 器 上 的 数据 ( 以 

防 出 现 问题 ) ? 

口 可 以 使 用 哪些 服务 器 端 语 言 和 软件 包 ? 
他 们 使 用 PHP、MySQL、WordPress 
或 其 他 高 级 特性 吗 ? 

O 他 们 提供 Web 分 析 报 告 吗 ? 通过 这 样 
的 报告 ， 可 以 知道 有 和 多少 人 访问 了 你 
的 网 站 及 其 他 有 用 的 数据 。 




















连接 域名 和 Web 主机 


将 ISP 作为 Web 主机 提供 商 

如 果 你 可 以 访问 互联 网 ， 就 可 能 已 经 
通过 你 的 ISP 获得 了 少量 的 Web 空间 。 它 
可 能 难以 存放 整个 网 站 ， 但 放 几 个 页 面倒 
是 足够 。 可 以 向 你 的 ISP 询问 详细 信息 。 
不 过 ， 要 记 住 的 是 ， 这 类 托管 空间 通常 不 
允许 使 用 单独 的 域名 访问 网 站 ， 例 如， 可 
以 使 用 www.someisp.com/your-site/， 但 不 
能 使 用 www.yourdomain.com。 因 此 ， 如 果 
你 希望 建设 的 是 专业 的 网 站 ， 就 不 要 使 用 
ISP 提供 的 免费 空间 存放 网 站 。 


注册 了 域名 ， 找 到 了 Web 主机 之 后 ， 下 面 很 重要 的 一 步 就 是 将 三 者 结合 到 一 起 : 你 必须 
将 你 的 域名 指向 你 的 Web 主机 ， 这 样 ， 访 问 者 输入 网 站 的 URL 时 网 站 才能 加 载 。 
要 实现 这 一 步 ， 需 要 对 你 的 域名 配置 域名 服务 器 。Web 主机 提供 商会 提供 用 于 这 项 配置 


的 域名 服务 器 信息 。 


根据 注册 域名 的 方式 (参见 21.1 节 ) 的 不 同 ， 实 际 的 配置 是 在 以 下 两 个 地 方 中 的 一 个 进 
行 的 。 如 果 域 名 是 通过 域名 注册 商 注 册 的 ， 可 以 登录 到 对 应 的 账户 ， 为 域名 设置 域名 服务 器 
信息 (域名 注册 商会 提供 操作 说 明 ) 。 如 果 域 名 是 通过 Web 主机 提供 商 注 册 的 ， 可 以 登录 到 


对 应 的 账户 ， 更 新 设置 。 


如 果 这 些 内 容 让 你 感到 有 些 疑 惑 ， 也 不 必 担 心 。Web 主机 提供 商 和 域名 注册 商会 提供 操 
作 上 的 说 明 ， 通 常 ， 如 果 需 要 ， 他 们 还 能 提供 手把手 的 帮助 。 

需要 记 住 的 是 ， 当 你 修改 域名 服务 器 设置 时 ， 通 常 需要 24 至 48 小 时 (最 多 72 小 时 ) 的 
时 间 , 相应 的 更 新 才能 传播 到 整个 万 维 网 。 不 过 , 这 种 改变 不 会 在 所 有 的 地 方 同 时 发 生 。 因 此 ， 
如 果 你 更 新 了 域名 服务 器 信息 ( 并 按照 21.3 节 的 说 明 上 传 了 网 站 的 文件 ) ， 你 的 朋友 可 能 
经 可 以 在 他 所 在 的 地 方正 常 访问 网 站 了 ， 而 你 却 无 法 立即 看 到 网 站 (也 可 能 是 相反 的 情况 ) 。 


你 的 网 站 应 该 在 不 久之 后 就 能 让 所 有 人 都 看 到 。 


21.3 ”将 文件 传送 至 服务 器 

为 了 让 互联 网 上 的 人 们 看 到 你 的 页 面 ， 
你 需要 将 页 面 上 传 到 Web 主机 服务 器 。 一 种 
简单 的 方法 就 是 使 用 FileZilla ( http:/filezilla- 
project.org ) 这 样 的 FTP 客户 端 。FileZilla 是 

















一 款 自由 软件 ， 可 以 运行 在 Windows, Mac 
OS X fill Linux 上 (关于 其 他 的 FTP 客户 端 ， 
参见 提示 )。 很 多 网 页 编辑 器 也 包含 FTP 功能 ， 
从 而 可 以 在 编辑 器 中 发 布 页 面 ， 而 不 必 使 用 
FileZilla 这 样 的 程序 。 
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， 你 的 Web 主机 提供 商会 在 你 注 

托管 C iL 发 送 FTP 连 
接 信息 。( 如 果 你 没有 收 到 , 可 以 联系 他 们 。) 
一 旦 获得 这 些 信息 ， 就 可 以 配置 服务 器 连 
接 ， 并 将 该 配置 保存 在 一 个 名 称 下 面 ， 如 
图 21.3.1. Fd 21.3.2 和 图 21.3.3 所 示 ， 从 而 在 
以 后 想 要 发 布 文件 ( 或 从 服务 器 上 下 载 文件 ) 
的 时 候 可 以 方便 地 访问 服务 器 。 

接 下 来 ， 连 接 到 服务 器 (如 图 21.3.4 所 
zs ) 和 传输 文件 ( 如 图 21.3.5 和 图 21.3.6 所 示 ) 
的 操作 相当 简单 。 


File Edit View Transfer Server Bookmarks Help 






ection to Site Manager... 



















New tab CTRL+T 
Close tab CTRL+W 
Export.. 
Import. 
Show files currently being edited... CTRL+E 
Exit CTRL+Q 


21.3.1 如 果 要 在 FileZilla 中 输入 新 的 服务 器 
信息 ， 从 主 窗口 中 选择 File 一 Site Manager (文件 
二 站 点 管理 器 ) o Site Manager 是 为 每 个 站 点 配置 








FTP 连接 信息 的 地 方 
Select Entry: 


General ] Advanced | Transfer Settings | Charset | 

EA Host: D f 
so Rss ee 
somesite "t a ile TransFer Protocol 


Encryption; {Use plain FTP I: 




















Logon Type: [anonymous z] 
User: Fronymous 


New Site IN | New Folder | 
New Bookmark | Rename | 
Delete | Copy | 


x | cu | 











21.3.2 
点 ) 按钮 ，My Sites (我 的 站 点 ) 下 面 就 会 
个 临时 的 名 称 


在 Site Manager 中 点 击 New Site ( 新 站 





出 现 一 





















































AOAR Site Manager 
Select Entry: 
paa — Advanced Transfer Settings | Charset | 
v -j MySites 
à mynewsite Host: ftp.mynewsite.com Port: 
£ someothersite Protocol: | FTP- File Transfer Protocol sl 
至 somesite Encryption: | Use plain FTP $) 
Logon Type: | Normal — -— T" | 
User: myusername E 
Account: 
Comments: 
[. NewSie |[ NewFolder | 
[ New Bookmark || ^ Rename | 
Delete |[ Copy J 
[ 6k, ] Cancer | 





























E 21.3.3 使 用 你 选择 的 名 称 替 换 临 时 名 称 ， 再 
在 General ( 常规 ) 标签 页 中 配置 连接 信息 。 点 击 
Connect (连接 ) 按钮 ， 会 保存 这 些 信息 并 立即 建 
立 与 服务 器 之 间 的 连接 。 点 击 OK ( 确定 ) 按钮 ， 
则 仅 会 保存 信息 


























lar iris is ET LII van 

= wenne ma OOOO | rd 
21.3.4” 当 站 点 的 连接 信息 保存 到 Site Manager 
之 后 ， 就 可 以 在 不 重复 输入 的 情况 下 直接 连接 到 
Web 主机 的 FTP 服务 器 。 在 Mac 或 Windows E, 
回 到 Site Manager 通过 A 中 的 服务 器 图 标 或 菜单 ) 
从 列表 中 选择 你 的 站 点 ， 再 点 击 Connect ( 如 图 
21.3.3 所 示 ) 。 在 Windows 上 ， 还 可 以 点 击 服务 器 
图 标 〈 位 于 最 左 端 ) 旁边 的 向 下 的 箭头 ， 再 从 弹出 
的 下 拉 菜 单 中 选择 站 点 名 称 ， 如 图 所 示 。FiliZilla 
会 连接 到 服务 器 










































| E 
1drectory, [Empty drectory. 


21.8.5 在 窗口 右 侧 ， 选 择 服务 器 的 目标 目录 。 
在 窗口 左 侧 ， 定 位 到 你 的 计算 机 上 包含 要 上 传 的 文 
件 的 目录 。 再 在 要 上 传 至 服务 器 的 文件 或 文件 夹 上 
点 击 鼠 标 右 键 ， 选 择 Upload ( 上传) 
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| 2n 











` 1 g 
|1 file and 4 directories. Total size: 115 bytes. || directory 





21.8.6 新 上 传 的 文件 夹 出 现在 窗口 右 侧 的 框 
内 。 对 所 有 要 传送 至 服务 器 的 文件 和 文件 夹 执 行 相 
同 的 操作 。 如 果 要 一 次 性 上 传 多 个 文件 和 文件 夹 ， 
可 以 先 选中 这 些 文件 和 文件 夹 ， 再 点 击 鼠 标 右键 并 
选择 Upload 





HI 


























注意 ，FileZilla Æ Mac OS 和 Windows 上 
的 外 观 有 些 不 同 , 但 其 界面 是 非常 相似 的 ( 截 
图 来 自 不 同 的 操作 系统 ) 。 除 非特 别 指出 ， 
以 下 使 用 步骤 对 两 个 版 本 来 说 都 是 相同 的 。 


1. 定义 新 的 FTP 站 点 的 属性 

(1) Æ FileZilla 的 主 菜单 中 选择 File 一 Site 
Manager ( 参见 图 21.3.1 ) o 

(2) 在 Site Manager 窗口 中 ， 点 击 New 
Site ( 新 站 点 ) 按钮 (参见 图 21.3.2 ) o My 
Sites 下 面 会 出 现 一 个 临时 名 称 。 

(3) 输入 站 点 名 称 ( 替换 临时 名 称 ) 。 
这 个 名 称 不 必 与 域名 相同 ， 它 只 是 一 个 标 
签 。 根 据 你 的 Web 主机 提供 商 的 说 明 ， 填 写 
General 标签 页 下 各 字段 的 信息 。 通 常 ， 至 少 
需要 输入 主机 URL TE Logon Type( 登录 类 型 ) 
中 选择 Normal( 常规 ) , 输入 用 户 名 和 密码 ( 通 
常 在 建立 账号 时 创建 ) ， 如 图 21.3.3 所 示 。 

(4) 输 完 连 接 信息 之 后 ， 点 击 Connect 按钮 保 
存 信息 并 立即 连接 到 服务 器 ， 或 者 点 击 OK 按钮 
保存 信息 供 以 后 连接 用 ， 如 图 2133 所 示 。 


2. 使 用 Filezilla 传送 文件 至 服务 器 

(1) 打开 FileZilla。 

(2) 选择 服务 器 图 标 (位 于 主 菜单 下 方 工 
具 栏 最 左 端 ) 旁边 的 向 下 箭头 ， 再 在 弹出 的 
下 拉 菜 单 中 选择 你 的 站 点 名 称 ， 如 图 21.3.4 























所 示 。FileZilla 就 会 建立 与 服务 器 的 连接 。 

(3) 在 窗口 的 右 侧 ， 定 位 到 要 上 传 文件 的 
服务 器 目录 。 

(4) 在 窗口 的 左 侧 ， 定 位 到 你 的 计算 机 上 
存放 要 上 传 的 文件 的 目录 。 

(5) 在 左 侧 框 中 要 上 传 的 文件 或 文件 夹 
上 点 击 鼠 标 右 键 ， 再 在 弹出 的 菜单 中 选择 
Upload ( 参见 图 21.3.5) ,文件 就 会 进行 传输 ， 
如 图 21.3.6 所 示 ( 对 于 视频 等 大 文件 ， 这 一 
过 程 所 需要 的 时 间 会 长 一 些 ) 。 还 可 以 反 过 
来 传输 文件 (参见 第 一 条 提示 ) 。 

(6) 你 对 站 点 的 更 新 现在 已 经 能 在 线 上 
看 到 了 。 通 过 www.yourdomain.tld ( 这 里 的 
yourdomain.tld 是 你 注册 的 域名 ; 其 中 ，.tld 是 
顶级 域名 ， 一般 为 .com， 但 也 可 以 注册 使 用 
其 他 扩展 名 的 域名 ) 访问 你 的 站 点 ， 确 保 一 
切 都 是 正常 的 。 如 果 需 要 ， 编 辑 你 的 计算 机 
上 的 文件 ， 再 按照 第 (3) 步 至 第 (5) 步 的 说 明 
将 它们 上 传 至 服务 器 ( 如 果 过 去 了 很 长 时 间 ， 
则 还 需 执行 第 (2) F) 。 重 复 这 一 步 ， 直 到 网 
站 完全 符合 你 的 预期 。 

(7) 完成 文件 传输 之 后 , 可 以 关闭 FileZilla 
或 在 主 菜单 中 选择 Server 一 Disconnect ( 服务 
器 一 断 开 连接 ) ， 如 图 21.3.7 所 示 。 






























































Server Bookmarks Help 


Cancel current operation 





Reconnect GTRIEHR, 





Search remote files... r3 
Enter custom command... 
Force showing hidden Files 





21.3.7 RZJ, WFE Server — Disconnect 


DJ 还 可 以 将 文件 从 网 站 服务 器 传 至 你 的 
计算 机 。 要 实现 这 一 步 ， 只 需要 右键 单 击 右 
侧 框 中 的 文件 或 文件 夹 ， 再 在 弹出 的 菜单 中 
选择 Download ( 下载 ) 。 
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FileZilla 只 是 众多 FTP 客户 端 中 的 一 
个 。Mac OS X 上 流行 的 其 他 FTP 客户 端 还 
有 CyberDuck ( 自由 软件 ，http://cyberduck. 
ch) , Transmit ( www.panic.com/transmit ) 和 
Fetch ( http://fetchsoftworks.com ) > Mac OS 
X 还 有 内 置 的 FTP 功能 (参见 http://osxdaily. 
com/2011/02/07/ftp-from-mac/) 。 在 网 上 搜索 

“FTP client” (FTP 客户 端 ) 可 以 找到 更 多 
的 可 以 运行 在 Windows fe Mac 上 的 软件 。 它 
们 的 工作 方式 是 相似 的 ， 只 是 有 的 软件 功能 
多 一 些 ， 有 的 少 一 些 。 


传输 文件 和 文件 夹 时 ， 它 们 是 被 复制 
到 目标 文件 夹 的 ， 原 来 的 位 置 还 保留 它们 的 
原始 版 本 。 

轩 园 ”如 果 要 传输 的 文件 或 文件 夹 在 目标 位 
置 已 经 存在 ， 那 么 FTP 程序 可 能 会 弹出 对 话 
JE, AUA TRR S (FileZilla 就 会 这 样 做 ) 。 
不 过 ， 每 个 FTP 客户 端 都 不 相同 ， 因 此 有 的 
软件 也 可 能 不 经 确认 而 直接 履 盖 。 可 以 试 着 
传 一 个 测试 文件 ， 了 解 你 的 FTP 客户 端 是 如 
何 处 理 这 类 情形 的 。 


代码 中 的 相对 URL 在 文件 夹 传 至 服 
务 器 之 后 仍然 有 效 。 


如 果 访 问 网 站 的 URL 时 网 站 无 法 显 
示 ， 可 能 有 多 种 原因 。 首 先 ， 再 次 检查 是 否 
已 将 文件 传 至 正确 的 目录 。 通 常 ， 页 面 应 位 
TT public html, www 或 其 他 类 似 名 称 的 目录 
下 。 你 的 Web 主机 提供 商 的 操作 说 明 中 应 该 
EU] 了 正确 的 位 置 ， 如 果 不 确定 ， 可 以 向 他 
们 咨询 。 如 果 文 件 都 放 在 正确 的 位 置 而 网 站 
依然 无 法 显示 ， 问 题 就 可 能 出 在 域名 服务 器 
设置 上 (参见 “连接 域名 和 Web 主机 ”) 。 


CHNES 如 果 将 某 文 件 的 新 版 本 上 传 至 服务 器 
之 后 却 没有 看 到 修改 的 效果 ， 可 以 清除 浏览 
器 的 缓存 ， 并 再 次 检查 页 面 。 如 果 不 清楚 如 
何 清除 缓存 ， 可 以 搜索 浏览 器 的 帮助 文档 。 


鲍 国 ”对 于 大 多 数 FTP 客户 端 ， 可 以 通过 改 
变 窗口 的 大 小 一 次 性 显示 更 多 (或 更 少 ) 的 
文件 。 要 改变 窗口 大 小 ， 拖 搜 窗 口 的 右 下 角 
即 可 。 





HTML 参考 








本 附录 包含 两 个 表格 : 表 A.1 和 表 A.2。 表 A.1 列 出 了 全 局 属性 ， 这 类 属性 能 够 应 用 于 大 多 
数 HTML 元 素 ; 表 A.2 列 出 了 HTML 元 素 和 其 特殊 属性 (也 就 是 非 全 局 的 ) 。 这 两 个 表 中 的 大 
部 分 属性 都 在 前 文中 讲 过 了 。 每 个 元 素 都 有 简单 的 描述 ， 元 素 后 面 以 缩 进 格式 列 出 了 与 其 相关 
联 的 属性 及 属性 的 注释 文字 。 

HTMLS 引入 了 大 量 新 的 元 素 和 属性 ， 还 重新 定义 了 一 些 W3C 在 早期 的 (X)HTML 规范 中 
不 推荐 使 用 的 元 素 。 对 于 来 自 HIML5 的 新 的 元 素 和 属性 ， 都 在 “版 本 ”一 栏 中 标 上 了 "5". 
对 于 在 HTMLS 中 有 新 的 含义 或 额外 含义 的 元 素 和 属性 ， 都 标 上 了 星 号 (* ) 

要 了 解 浏览 器 对 HTMLS 特性 的 最 新 支持 情况 ， 请 访问 http://caniuse.com/ 和 http://findmeb- 
yip.com/litmus ; 


A.1 HTML 全 局 属性 
以 下 属性 可 应 用 于 大 多 数 HTML 元 素 。 
表 A.1 HTML 全 局 属性 



































































































































































































































全 局 属性 JH R 版 ”本 
accesskey ] 于 为 元 素 添加 键盘 快捷 键 
aria-* 用 于 关联 由 WAI-ARIA 指定 的 可 访问 性 属性 值 5 
class 用 于 标识 一 组 元 素 ， 以 便 为 它们 应 用 样式 
contenteditable 用 于 让 元 素 的 内 容 变 成 可 编辑 的 5 
contextmenu 于 标识 元 素 的 上 下 文 菜单 ( 其 值 必须 与 菜单 元 素 的 id 属性 值 相同 ) 5 
data-* 用 于 存储 页 面 或 应 用 特有 的 定制 化 数据 5 
dir j 于 指定 元 素 的 文字 方向 
draggable 用 于 让 元 素 变 成 可 拖 搜 的 5 
dropzone 用 于 将 元 素 标记 为 可 拖 搜 元 素 可 以 放下 的 区 域 5 
event ] 于 关联 元 素 与 脚本 ( event 表示 某 个 实际 的 事件 名 称 ) 
hidden 用 于 指示 元 素 还 不 是 相关 的 或 不 青 是 相关 的 5 
id 用 于 标识 特定 的 元 素 ， 以 便 为 其 添加 链接 ， 应 用 样式 或 使 用 JavaScript 





























编写 脚本 
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(ER) 
全 局 属性 jS x 版 本 
lang 用 于 指定 元 素 的 书写 语言 
role 用 于 为 辅助 设备 提供 关于 元 素 角 色 的 额外 信息 (由 WAI-ARIA 定义 ) 5 
spellcheck 用 于 指示 是 否 应 该 对 元 素 的 内 容 进行 拼写 和 语法 检查 5 
style 用 于 添加 本 地 样式 表 信息 
tabindex 用 于 定义 访问 者 使 用 制 表 键 时 在 元 素 之 间 移 动 的 顺序 
title 用 于 为 元 素 添 加 工具 提示 
A.2 HTML 元 素 和 属性 
表 A.2 HTML 元 素 和 属性 
元 素 / 属性 描 R 版 本 
a 用 于 创建 链接 和 锚 
href 指 于 定 链接 到 的 页 面 的 URL 或 锚 的 名 称 
hreflang 用 于 指定 所 链接 的 资源 的 语言 5 
media 于 描述 目标 文档 所 定义 的 媒体 类 型 5 
rel 用 于 标识 链接 的 性 质 
target 于 指定 链接 应 打开 的 窗口 或 框架 i 
type 用 于 指定 资源 的 MIME 类 型 
abbr 于 解释 缩写 或 首 字母 缩写 的 含义 * 
address 用 于 为 最 近 的 article 或 body 元 素 祖 先 标识 联系 人 信息 
area 于 指定 图 像 映射 的 坐标 
accesskey 用 于 为 映射 的 特定 区 域 添 加 键盘 快捷 键 
alt 用 于 给 出 关于 区 域 的 信息 
coords 用 于 给 出 图 像 映射 中 区 域 的 坐标 
href 用 于 指定 图 像 映射 中 区 域 链接 的 目标 URL 
hreflang 用 于 指定 所 链接 的 资源 的 语言 5 
media 用 于 描述 定义 目标 文档 的 媒体 5 
rel 用 于 标识 链接 的 种 类 
shape 于 指定 图 像 映射 中 区 域 的 形状 
target 用 于 指定 链接 应 打开 的 窗口 或 框架 * 
article 于 标识 页 面 中 的 独立 成 分 ， 原 则 上 是 可 独立 分 发 或 可 再 用 的 5 
aside 用 于 标识 页 面 中 的 一 个 区 域 ， 其 内 容 与 周围 的 内 容 无 关 5 
audio TTE vt ili Pri ACE 5 
autoplay 用 于 告诉 浏览 器 在 它 能 播放 音频 文件 时 立即 开始 播放 5 
controls 用 于 告诉 浏览 器 为 音频 元 素 提 供 控 件 5 
crossorigin 用 于 设置 跨 域 请 求 凭证 5 
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CER) 
元 素 / 属性 Ho R 本 
loop 用 于 告诉 音频 文件 在 播放 到 末尾 后 不 间断 地 继续 从 头 播放 5 
mediagroup 用 于 关联 多 个 媒体 文件 5 
muted 用 于 控制 音频 输出 的 默认 状态 5 
preload 用 于 指定 浏览 器 是 否 在 访问 者 开始 播放 音频 文件 之 前 开始 下 载 该 文件 5 
SIC 用 于 标识 要 播放 的 音频 文件 的 URL 5 
b 用 于 标识 出 于 实用 的 目的 提醒 读者 注意 的 一 块 文本 ， 不 传达 任何 额外 * 
的 重要 性 ， 也 不 表示 其 他 的 语 态 和 语气 
base 用 于 指定 页 面 的 基准 URL 
href 用 于 指定 用 于 生成 相对 URL 的 URL 
target 用 于 指定 页 面 上 链接 的 默认 目标 
bdi 用 于 标识 独立 于 周围 文本 的 用 做 双向 文本 格式 化 的 一 块 文本 5 
dir 用 于 指定 文本 方向 3 
bdo 用 于 显 式 地 格式 化 其 内 容 的 文本 方向 
dir 用 于 指定 文本 方向 
blockquote 用 于 指定 页 面 上 的 一 段 引 述 文本 
cite 用 于 给 出 来 源 的 URL 
body 用 于 包围 页 面 的 主要 内 容 区 域 
br 用 于 创建 换行 
button 用 于 创建 按钮 
autofocus 用 于 指定 按钮 在 页 面 加 载 时 立即 获得 焦点 5 
disabled 用 于 指示 元 素 在 当前 状态 下 是 不 可 用 的 
form 用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 5 
formaction 用 于 和 窗 盖 表单 的 action 属性 5 
formenctype 用 于 有 覆盖 表单 的 enctype 属性 5 
formmethod 用 于 窗 盖 表单 的 method 属性 5 
formnovalidate 于 窗 盖 表单 的 novalidate 属性 5 
formtarget H TAREN target 属性 5 
name 用 于 标识 使 用 按钮 发 送 的 数据 ， 或 者 用 于 标识 按钮 本 身 (或许 是 为 了 
使 用 某 项 JavaScript 功能 ) 
type 忆 于 在 表单 元 素 中 使 用 按钮 
value 用 于 指定 在 点 击 按钮 时 应 该 提交 的 数据 
Canvas 提供 用 于 生成 依赖 于 分 状 率 的 位 图 画布 的 脚本 ， 以 在 线 呈现 图 像 5 
width, height 用 于 指定 画布 的 尺寸 5 


caption 
cite 
code 


col 
































































































































































































































































































































































































































用 于 创建 表格 的 标题 

用 于 将 文本 标记 为 引述 

用 于 将 文本 标记 为 计算 机 代码 

用 于 把 表格 中 的 列 组 合成 非 结 构 化 组 
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元 素 / 属性 描 R 
span 用 于 指定 列 组 中 的 列 数 
colgroup 用 于 把 表格 中 的 列 组 合成 结构 化 列 组 
span 用 于 指定 列 组 中 的 列 数 
command 用 于 表示 用 户 可 以 调用 的 命令 ， 如 定义 键盘 命令 5 
checked 用 于 指示 命令 的 选中 状态 ( 如 果 命 令 的 类 型 为 复 选 框 或 单 选 按钮 的 话 ) 5 
disabled 用 于 指示 命令 在 当前 状态 下 是 不 可 用 的 5 
icon 用 于 提供 代表 命令 的 图 像 5 
label 用 于 向 用 户 显 示 命 令 的 名 称 5 
radiogroup 用 于 标识 当 命 令 切换 时 它 也 跟着 切换 的 单 选 按 钮 ( 如 果 命 令 的 类 型 为 5 
单 选 按钮 的 话 ) 
type 用 于 指定 命令 的 类 型 
datalist 包含 一 组 选项 元 素 ， 这 些 元 素 是 代表 男 一 表单 控件 的 一 套 预 定义 的 选项 
dd 用 于 标记 列表 中 的 定义 
details 用 于 创建 公开 的 小 部 件 ， 访 问 者 可 以 通过 它 获取 额外 的 信息 或 控制 
open 用 于 指定 元 素 在 默认 情况 下 是 打开 的 还 是 关闭 的 
del 用 于 标记 删除 了 的 文本 
cite 用 于 引用 对 修订 进行 解释 的 URL 
datetime 用 于 指定 修订 的 时 间 和 日 期 
dfn 用 于 指定 列表 项 目的 定义 实例 
title 用 于 提供 术语 的 定义 
div 用 于 将 页 面 切割 为 块 级 区 域 
dl 用 于 创建 定义 列表 
dt 用 于 标记 要 在 列表 中 定义 的 术语 
em 用 于 标记 要 强调 的 文本 
embed 用 于 添加 多 媒体 
src 用 于 指定 多 媒体 文件 的 URL 
type 用 于 标识 多 媒体 文件 的 MIME 类 型 
width, height 用 于 指定 能 入 的 多 媒体 播放 器 的 尺寸 
fieldset 用 于 将 一 套 表单 元 素 组 合 在 一 起 
disabled 用 于 将 表单 元 素 组 内 的 所 有 表单 控件 设 为 不 可 用 的 5 
form 用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 5 
name 用 于 为 表单 元 素 组 提供 一 个 名 称 ， 供 以 后 使 用 5 
figcaption 用 于 为 其 父 元 素 figure 的 内 容 提 供 标题 或 说 明文 字 5 
figure 用 于 识别 在 主 文档 流 内 被 引用 ， 但 在 不 影响 文档 流 的 情况 下 可 以 移 至 5 
也 处 的 内 容 
footer 用 于 识别 最 近 的 祖先 元 素 body, section, article 或 aside 的 页 脚 
form 用 于 指定 表单 ， 表 单 用 于 收集 要 提交 的 数据 
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(EE) 
元 素 / 属性 描述 本 
accept-charset 用 于 识别 要 在 提交 表单 时 使 用 的 字符 编码 ( 默认 为 页 面 的 字符 集 ) 
action 用 于 给 出 处 理 表 单数 据 的 脚本 的 URL. 
autocomplete 当 该 属性 设 为 of 时， 用 于 阻止 浏览 器 提供 或 记 住 自 动 完 成 值 ( 默认 为 5 
on， 即 在 默认 情况 下 允许 自动 完成 ) 
enctype 用 于 确保 文件 以 正确 的 编码 格式 发 送 至 服务 器 
method 用 于 指定 数据 应 如 何 发 送 至 服务 器 
name 用 于 为 表单 提供 名 称 ， 供 以 后 使 用 
novalidate 用 于 允许 表单 在 不 验证 的 情况 下 提交 5 
target 用 于 识别 表单 提交 的 目标 窗口 或 iframe * 
hi, h2, h3, h4, 用 于 创建 标题 
h5, h6 
head 用 于 创建 head 部 分 ， 该 部 分 包含 关于 页 面 的 信息 ， 包 括 标题 、 制 作者 、 
关键 词 、 样 式 表 和 脚本 
header 用 于 识别 一 组 介绍 性 内 容 或 导航 帮助 5 
hgroup 用 于 识别 具有 多 个 层级 的 区 块 标题 5 
hr 用 于 标识 段落 级 的 主题 变化 
html 用 于 标识 作为 HTML 文档 的 文本 文档 
manifest 用 于 指定 离线 时 使 用 的 应 用 程序 缓存 清单 5 
Í 用 于 标记 用 另外 一 种 语 态 和 语气 ， 或 不 同 于 常规 方式 陈述 以 表现 不 同 * 
特质 的 一 块 文字 
iframe FH-T- Gu ise D V. E RC * 
name 书 于 指定 作为 目标 的 iframe 的 名 称 
sandbox 用 于 出 于 安全 目的 ， 为 iframe 的 内 容 指定 额外 的 限制 5 
seamless 用 于 指定 iframe 是 否 显示 为 包含 它 的 页 面 的 一 部 分 5 
src 用 于 指定 初始 页 面 的 URL 
srcdoc 用 于 指定 初始 页 面 的 URL 5 
width, height 用 于 指定 iframe 的 尺寸 
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alt 


crossorigin 
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src 
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width, height 


input 

























































































































































































































































































用 于 在 页 面 中 插入 图 像 


用 于 提供 替代 文本 。 当 图 像 无 法 显示 时 ， 则 显示 替代 文本 ;替代 文本 
电 是 为 使 用 辅助 设备 的 用 户 提供 的 



































































































































用 于 允许 来 

素 一 起 使 用 

用 

素 的 后 代 ) 的 访问 
用 于 指定 图 像 的 URL 
HF 

HT 

放 的 目的 

用 于 创建 表单 元 素 

















引 定 应 同 引 用 图 像 一 起 使 用 的 客户 端 图 像 映 射 
指定 图 像 的 尺寸 ， 从 而 让 页 面 的 加 载 更 快 ， 或 出 于 对 图 像 进 行 缩 




















自 第 三 方 站 点 ( 该 站 点 允许 跨 域 访问 ) 的 图 像 同 canvas 元 


指示 该 元 素 可 以 提供 对 服务 器 端的 图 像 映射 〈 该 元 素 必 须 是 a 元 
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元 素 / 属性 描 R 
accept 当 输 入 框 类 型 为 file 时 ， 用 于 向 浏览 器 告知 需要 接受 的 文件 类 型 
alt 当 输入 框 类 型 为 image 时 ， 用 于 提供 替换 文本 
autocomplete 当 该 属性 设 为 of 时， 用 于 阻止 浏览 器 提供 或 记 住 自 动 完成 值 ( 默认 为 
on， 即 在 默认 情况 下 允许 自动 完成 ) 
autofocus 用 于 指定 输入 框 在 页 面 加 载 时 立即 获得 焦点 
checked 用 于 标记 单 选 按钮 或 复 选 框 在 默认 情况 下 被 选中 
dirname 用 于 标识 输入 的 文本 的 方向 
disabled 用 于 指示 输入 框 在 当前 状态 下 是 不 可 用 的 
form 用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 5 
formaction HPH RAH action 属性 5 
formenctype HTA si ULM enctype 属性 5 
formmethod 用 于 覆盖 表单 的 method 属性 5 
formnovalidate HTA KRAH novalidate 属性 5 
formtarget 用 于 覆盖 表单 的 target 属性 5 
list 用 于 将 输入 框 与 数据 列表 关联 起 来 5 
max, min 用 于 指示 输入 框 元 素 允 许 的 值 的 范 古 5 
maxlength 用 于 指定 可 输入 到 输入 框 元 素 的 字符 的 最 大 数量 
multiple 用 于 指定 是 否 允许 用 户 输入 一 个 以 上 的 值 
name 用 于 标识 元 素 收集 的 数据 
pattern 用 于 提供 可 对 输入 框 元 素 的 数据 进行 检查 的 正则 表达 式 
placeholder 用 于 为 数据 输入 提供 提示 
readonly 用 于 防止 访问 者 修改 特定 的 表单 元 素 
required 用 于 要 求 元 素 在 提交 表单 时 不 能 为 空 ( 当 输 入 框 类 型 为 hidden, image 
或 按钮 类 型 时 不 可 用 ) 
size 用 于 指定 文本 框 或 密码 框 的 长 度 
src 用 于 指定 活动 图 像 的 URL 
step 用 于 控制 允许 输入 的 值 的 间隔 大 小 和 特殊 性 
type 用 于 指定 表单 元 素 的 类 型 为 文本 框 、 密 人 码 杠 、 单 选 按钮 、 复 选 框 、 隐 
藏 字段 、 提 交 按 钮 、 重 置 按钮 、 活 动 图 像 、 日 期 /时间 框 、 数字 框 或 关 
色 框 ; 用 于 从 一 系列 值 中 进行 选择 ; 或 用 于 输入 电话 号 码 、 电 子 邮件 
也 址 或 一 组 搜索 词 
value 用 于 指定 表单 元 素 的 默认 数据 
width，height 用 于 指定 输入 框 的 尺寸 ( 仅 在 输入 框 类 型 为 image 时 可 以 使 用 ) 
ins 用 于 标记 对 文档 增加 的 内 容 
cite 用 于 引用 对 修订 进行 解释 的 URL 
datetime 用 于 指定 修订 的 时 间 和 日 期 
kbd 用 于 标记 用 户 输入 
keygen 必 于 生成 公 钥 一 私 钥 对 
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CH) 
元 素 /属性 描 述 本 
autofocus 用 于 指定 keygen 元 素 在 页 面 加 载 时 立即 获得 焦点 5 
challenge 用 于 生成 与 密 钥 对 伴生 的 话 问 5 
disabled 用 于 指示 元 素 在 当前 状态 下 是 不 可 用 的 5 
form 用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 5 
keytype 用 于 标识 要 生成 的 密 钥 对 类 型 5 
name 用 于 标识 收集 的 数据 5 
label 用 于 为 表单 元 素 添加 标签 
for 用 于 指定 标签 所 属 的 表单 元 素 
form 用 于 将 元 素 同 另 外 一 个 不 包含 该 元 素 的 表单 关联 起 来 5 
legend 用 于 为 表单 元 素 组 添加 标签 
li 用 于 创建 列表 项 
value 用 于 指定 列表 项 目的 初始 值 ( 当 该 元 素 为 ol 的 子 元 素 时 ) * 
link 用 于 指向 外 部 样式 表 或 其 他 外 部 资源 
href 用 于 指定 资源 的 URL 
hreflang 用 于 指定 所 链接 的 资源 的 语言 5 
media 用 于 定义 样式 表 的 目标 媒体 类 型 和 (或) 媒体 特性 
rel 用 于 标识 链接 种 类 
sizes 用 于 标识 引用 图 标的 大 小 〈 仅 在 rel 属性 为 icon 时 可 以 使 用 ) 5 
title 用 于 为 蔡 代 样式 表 或 其 他 资源 添加 标签 
type 用 于 指出 资源 的 MIME 类 型 ( 仅 在 链接 类 型 不 为 text/css 时 需要 使 用 ) 
map 用 于 创建 客户 端 图 像 映射 
name 用 于 对 映射 命名 ， 从 而 使 其 可 在 以 后 被 引用 
mark 出 于 引用 的 目的 ， 对 与 男 一 个 上 下 文 相关 的 文本 进行 突出 显示 5 
math 用 于 在 页 面 中 能 入 MathML 5 
menu 用 于 包含 命令 列表 * 
label 用 于 为 菜单 添加 标签 5 
type 用 于 标识 所 使 用 的 菜单 的 种 类 : context, list ( 默认 值 ) 或 toolbar 5 
meta 用 于 关联 页 面 的 各 种 元 数据 
charset 用 于 标识 页 面 本 身 的 字符 编码 5 
content 用 于 添加 关于 页 面 本 身 的 额外 信息 
http-equiv 用 于 创建 指向 其 他 页 面 的 自动 跳 转 ， 设 置 默认 脚本 语言 ， 声 明 字符 编码 
name 用 于 标识 关于 页 面 的 额外 信息 
meter 用 于 表示 在 已 知 范围 内 的 量度 5 
high, low 书 于 指定 量度 为 high 或 low 5 
max, min 用 于 标识 允许 指定 的 值 的 最 大 值 和 最 小 值 5 
name 用 于 标识 收集 的 数据 5 
































































































































































































































































































































































































































附录 A ^ HTML AX 359 
(ER) 
元 素 / 属性 Ho R 版 本 
optimum 用 人 2 
value 用 于 指定 量 表 的 当前 值 ( 必需 的 属性 ) 5 
nav 用 于 标识 页 面 的 一 块 区 域 ， 该 区 域 包含 指向 其 他 页 面 或 页 面 内 不 同 部 5 
分 的 链接 
noscript 用 于 提供 脚本 的 替代 内 容 
object HIT EISE DC Pi AOGESR 
data H FERRERA PI Ae LUIS SCIT E RI oe 
form 用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 5 
name 用 于 标识 对 象 ( 例如， 对 其 编写 脚本 ) 
type 用 于 指出 对 象 的 MIME 类 型 
typemustmatch 用 于 指示 对 象 data 属性 中 指定 的 资源 的 MIME 类 型 必须 与 对 象 type 
属性 中 标识 的 MIME 类 型 相同 
usemap 用 于 指示 对 象 是 否 拥有 相关 联 的 图 像 映射 
width，height 用 于 指定 对 象 框 的 尺寸 
ol 用 于 创建 有 序列 表 
reversed 用 于 指定 列表 是 否 为 反 序 (e. 3, 2, 1) 5 
start 用 于 指定 第 一 个 列表 项 目的 初始 值 j 
type 用 于 指定 每 个 列表 项 目 开 始 的 数字 类 型 
optgroup 用 于 对 select 元 素 中 的 option 元 素 进行 分 组 ,一 组 内 的 option 元 素 
位 于 同一 个 标签 下 
disabled 用 于 指示 元 素 在 当前 状态 下 是 不 可 用 的 
label 用 于 为 选项 组 添加 标签 
option 用 于 创建 select 或 datalist 元 素 中 的 单独 的 选项 
disabled 用 于 指示 元 素 在 当前 状态 下 是 不 可 用 的 
label 用 于 指定 选项 如 何 出 现在 菜单 中 
selected 用 于 标记 空白 表单 中 默认 被 选中 的 菜单 选项 
value 用 于 指定 菜单 选项 的 初始 值 
output 用 于 表示 计算 结果 5 
for 用 于 创建 计算 结果 与 进入 计算 过 程 的 值 之 间 的 显 式 关 联 5 
form 用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 5 
name 用 于 标识 收集 的 数据 5 
p 用 于 创建 段落 
param 用 于 设置 对 象 的 属 
name 用 于 标识 属性 的 种 类 
value 用 于 设置 有 名 称 的 属性 的 值 
pre 用 于 表示 一 块 预 格式 化 文本 
progress 用 于 标识 任务 的 完成 进度 5 


























360 WRA HTML 参考 
CH) 
元 素 /属性 描 述 本 
max 必须 为 大 于 0 的 有 效 浮 点 数 ( 如 果 有 的 话 ) 5 
value 必须 为 大 于 或 等 于 0 的 有 效 浮 点 数 C 且 小 于 或 等 于 max 属性 的 值 ， 如 5 
果 有 该 值 的 话 ) 
q 用 于 引用 来 自 另 一 来 源 的 短文 
cite 用 于 给 出 引用 源 的 URL 
rp 用 于 在 不 支持 旁 注 标记 的 浏览 器 中 的 旁 注 标记 文本 周围 显示 括号 5 
rt 用 于 标记 旁 注 标记 文本 5 
ruby 用 于 允许 文本 被 旁 注 标记 所 标记 5 
s 用 于 标识 不 再 准确 或 不 再 相关 的 文本 t 
samp 用 于 呈现 某 程序 或 计算 系统 的 样本 输出 
script 用 于 为 页 面 添加 “自动 的 ”脚本 
async 用 于 影响 脚本 的 加 载 和 执行 5 
charset 用 于 指定 外 部 脚本 所 用 的 字符 集 
defer 用 于 影响 脚本 的 加 载 和 执行 
src 用 于 引用 外 部 脚本 
type 用 于 指定 脚本 所 用 的 脚本 语言 ( 仅 在 脚本 类 型 不 为 text/javascript 时 需 
要 使 用 ) 
section 用 于 识别 文档 的 区 块 5 
select 用 于 创建 可 以 从 一 组 选项 中 进行 选择 的 表单 控件 
autofocus 用 于 指定 select 元 素 在 页 面 加 载 时 立即 获得 焦点 5 
disabled 用 于 指示 元 素 在 当前 状态 下 是 不 可 用 的 
form 用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 5 
multiple 用 于 允许 用 户 在 菜单 中 选择 一 个 以 上 的 选择 
name 用 于 标识 从 菜单 收集 的 数据 
required HFR PUE FE — T POXUAT ERES UR. A option 子 元 素 5 
必须 为 占 位 符 或 空 值 ) 
size 用 于 指定 在 初始 状态 下 菜单 中 可 见 的 项 目 数 C 同时 用 于 将 菜单 显示 为 
列表 ) 
small 用 于 呈现 像 条 文 细 则 等 次 要 注释 * 
source 用 于 在 audio 或 video 元 素 中 标识 替代 媒体 资源 5 
crossorigin 用 于 设置 跨 域 请 求 凭 证 5 
media 用 于 标识 资源 的 目标 媒体 类 型 5 
src 用 于 标识 要 播放 的 音频 或 视频 文件 的 URL 5 
type 用 于 指出 资源 的 MIME 类 型 5 
span 用 于 包围 元 素 中 无 直接 语义 含义 的 内 容 * 
strong 用 于 标识 元 素 内 特别 重要 的 内 容 
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用 于 在 页 面 中 嵌入 样式 信息 










































































































































































































































































































































































































































































附录 A HTML 参考 361 
(EE) 
元 素 / 属性 JH xh 版 本 
media 用 于 标识 样式 表 的 用 处 
scoped 用 于 仅 对 元 素 的 父 元 素 的 后 代 应 用 样式 5 
type 用 于 标识 样式 表 的 MIME 类 型 ( 仅 在 样式 类 型 不 为 text/css 时 需要 使 用 ) 
sub 用 于 创建 下 标 
summary 用 于 标识 details 父 元 素 内 容 的 摘要 、 标 题 或 说 明文 字 5 
sup 用 于 创建 上 标 
svg 用 于 在 页 面 中 嵌入 可 缩放 矢量 图 形 5 
table 用 于 创建 表格 
tbody 用 于 识别 表格 的 主体 部 分 ; 比 之 于 头 部 (thead) 和 尾部 (tfoot ) 
td, th 分 别 用 于 在 表格 中 创建 普通 单元 格 和 标题 单元 格 
colspan 用 于 让 单元 格 跨越 多 列 
rowspan 用 于 让 单元 格 跨越 多 行 
scope 用 于 指定 th 应 用 于 哪些 行 、 列 、 行 组 或 列 组 
textarea 用 于 在 表单 中 创建 文本 块 输入 区 域 
autofocus 用 于 指定 文本 区 域 元 素 在 页 面 加 载 时 立即 获得 焦点 5 
dirname 日 于 识别 输入 的 文本 的 方向 5 
disabled 用 于 指示 元 素 在 当前 状态 下 是 不 可 用 的 
form 用 于 将 元 素 同 另外 一 个 不 包含 该 元 素 的 表单 关联 起 来 5 
maxlength 用 于 指定 可 输入 到 textarea 元 素 的 字符 的 最 大 数量 
name 用 于 标识 从 文本 块 收集 的 数据 
placeholder 用 于 为 数据 输入 提供 提示 5 
readonly 用 于 保护 文本 区 域 的 内 容 
required 用 于 要 求 元 素 在 提交 表单 时 不 能 为 空 5 
rows, cols 分 别 用 于 指定 文本 块 的 行 数 和 列 数 
wrap 用 于 指定 在 字段 内 容 提 交 时 使 用 软 换行 或 硬 换行 5 
tfoot, thead 用 于 识别 表格 的 尾部 和 头 部 
time 用 于 指定 日 期 和 时 间 5 
datetime 用 于 为 元 素 的 文本 所 表达 的 时 间或 日 期 提供 机 器 可 读 版 本 5 
pubdate 用 于 指定 元 素 的 祖先 article sk body 元 素 的 发 布 日 期 和 时 间 5 
title 用 于 创建 页 面 的 标题 ( 必须 使 用 ) 
tr 用 于 在 表格 中 创建 行 
track 日 于 为 audio 或 video 父 元 素 指定 外 部 计时 文本 轨道 5 
default 用 于 指示 默认 轨道 5 
kind 用 于 识别 轨道 为 subtitles ( 字幕 ) , captions ( 标题 ) descriptions ( 描 5 
YR) , chapters (篇章 ) 或 metadata (元 数据 ) 
label 用 于 为 轨道 提供 用 户 可 读 的 名 称 5 
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CER) 
元 素 / 属性 描 述 本 
src 用 于 标识 轨道 数据 的 URL 5 
srclang 用 于 标识 轨道 数据 的 语言 5 
U 用 于 显示 一 段 文本 ， 作 为 虽然 明确 地 呈现 却 不 怎么 准确 的 非 文 本 注解 . 
ul 用 于 创建 无 序列 表 
var 用 于 标记 作为 变量 的 文本 
video 用 于 众人 视频 、 电 影 和 有 说 明文 字 的 音频 文件 5 
autoplay 用 于 告诉 浏览 需 在 它 能 播放 视频 文件 时 立即 开始 播放 5 
controls 用 于 告诉 浏览 器 为 视频 元 素 提供 控件 5 
crossorigin 用 于 设置 跨 域 请 求 任 证 5 
loop 尾 于 告诉 视频 文件 在 播放 到 末尾 后 不 间断 地 继续 从 头 播放 5 
mediagroup 用 于 关联 多 个 媒体 文件 5 
muted 用 于 控制 音频 输出 的 默认 状态 5 
poster E SDN URL， 该 图 片 在 媒体 加 载 时 或 加 载 出 现 问题 时 5 
preload 用 于 指定 浏览 器 是 否 在 访问 者 开始 播放 媒体 文件 之 前 开始 下 载 该 文件 5 
src 用 于 标识 要 播放 的 视频 文件 的 URL 5 
width, height 用 于 指定 视频 的 尺寸 5 
wbr 用 于 识别 在 没有 连 字符 的 单词 中 可 以 在 必要 时 进行 换行 的 位 置 5 

































































































































































CSS 引用 








本 附录 包含 以 下 CSS 引用 表格 。 

口 表 B.1 CSS 属性 和 值 ， 可 用 做 很 多 常见 或 实用 的 CSS 属性 及 其 默认 值 、 人 允许 值 的 快速 

参考 。 

口 表 B.2 CSS 选择 器 和 结合 符 ， 对 CSS 选择 器 和 结合 符 的 引用 ， 包 括 在 CSS3 中 引入 的 

那些 。 

口 表 B.3 CSS3 的 颜色 值 ， 涵 盖 了 在 CSS3 中 引入 的 颜色 值 (HSL、HSLA 和 RGBA ) 。 

口 表 B.4 CSS3 渐变 ， 演 示 了 在 CSS 中 定义 渐变 的 语法 。 

口 表 B.5 媒体 查询 ， 演 示 了 媒体 查询 的 语法 。 媒 体 查询 用 于 对 特定 的 媒体 类 型 ( 如 屏 
幕 、 打 印 ) 定位 样式 ， 以 及 对 探测 到 的 其 他 媒体 特性 ( 如 设备 尺寸 、 方向 等 ) 定位 
样式 。 

口 表 B.6 和 骨 入 字体， 演示 了 使 用 @font-face JU A SE PERIERE s 

注意 : CSS3 规范 还 处 于 变化 之 中 ,浏览 需 也 不 断 为 规范 中 的 各 种 模块 更 新 额外 的 文 持 。 浏 

览 器 厂商 还 引入 了 一 些 自己 的 新 特性 ， 或 者 实现 了 一 些 还 未 成 为 标准 的 CSS3 特性 。 幸 好 ，CSS 

提供 了 一 种 安全 的 处 理 方式 ， 即 厂商 前 级 。 厂 商 前 级 允许 不 同 的 浏览 器 在 不 干扰 其 他 浏览 妖 的 

实现 ， 且 不 覆盖 未 来 标准 版 本 的 情况 下 ， 对 属性 进行 实验 性 地 实现 ( 例如 ， 使 用 -webkit-box- 

shadow 而 不 是 box-shadow ) 。 
最 为 常见 的 厂商 前 级 包括 : 

口 -moz- ( Firefox 及 其 他 使 用 Mozilla 泻 染 引擎 的 浏览 句 ) 

Q -webkit- ( Chrome, Safari 及 其 他 使 用 WebKit 泻 染 引擎 的 浏览 需 ) 

D -o- ( Opera) 

口 -ms- (Internet Explorer 8 及 以 上 版 本 ) 

关于 哪些 浏览 器 支持 哪些 CSS3 属性 和 值 的 信息 ， 可 参考 www.quirksmode.org/css/contents. 
html, 、http:/caniuse.com 及 http:/findmebyip.conylitmus。 此 外 ， 还 可 以 使 用 像 Modernizr ( www. 
modernizr.com ) 这 样 的 JavaScript 库 测 试 浏览 器 对 这 些 特性 的 支持 情况 。 
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B.1 CSS 属性 和 值 


表 B.1 CSS 属性 和 值 
属性 / 值 描述 和 注释 














background 用 于 修改 元 素 的 背景 颜色 和 背景 图 像 

任 何 background-attachment、background- 初始 值 取决 于 单独 的 属性 ， 不 继承 的 background-position 可 使 用 
color, background-image, background-repeat 百分数 

和 (或 ) background-position 值 的 组 合 , 或 。 如 果 要 显示 多 重 背 景 ,可 使 用 逗号 分 隔 组 合 背 景 值 ， 如 果 要 指定 
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inherit background-color， 应 包含 在 最 后 一 个 背景 中 

background-attachment 用 于 决定 背景 图 像 是 否 可 以 滚动 ， 以 及 滚动 的 方式 

scroll, fixed 或 inherit 初始 scroll; 不 继承 的 
如 果 要 显示 多 重 背景 ， 可 以 为 每 个 背景 应 用 不 同 的 background- 
attachment 值 ( 用 逗号 分 隔 不 同 的 值 ) 

background-color 于 设置 元 素 的 背景 颜色 

颜色 值 transparent 或 inherit 初始 值 : transparent; 不 继承 的 

background-image 用 于 设置 元 素 的 背景 图 像 





URL, CSS 渐变 (参见 表 B4) 、none 3 inherit 初始 值 : none; 不 继承 的 
如 果 要 显示 多 重 背景 ， 可 使 用 逗号 分 隔 图 像 值 









































background-position 于 设置 指定 的 背景 图 像 的 物理 位 置 
一 个 或 两 个 百分数 、 长 度 (或 一 个 百分数 和 ” ”初始 值 ，0% 0%; 如 果 仅 设置 一 个 百分数 ， 它 会 用 于 水 平 位 置 ， 
一 个 长 度 ) ， 或 top、center 、bottom 之 一 ”而 垂直 位 置 的 初始 值 则 被 设 为 50%; 如 果 仅 使 用 一 个 关键 字 ， 另 
和 (或 ) left, center, right;z —, sV fii 一 个 的 初始 值 则 为 center; 应 用 于 块 级 和 替换 元 素 ; 不 继承 的 ; 
用 inherit 百分数 相对 于 盒 本 身 的 尺寸 

如 果 要 显示 多 重 背景 ， 可 以 为 每 个 背景 应 用 不 同 的 background- 































































































































































































position 值 (用 逗号 分 隔 不 同 的 值 ) 

background-repeat 用 于 确定 背景 图 像 是 否 重复 及 重复 方式 

repeat, repeat-x, repeat-y, no-repeat 或 初始 值 : repeat; 不 继承 的 

inherit 之 一 如 果 要 显示 多 重 背 景 图 像 ， 可 以 为 每 个 背景 图 像 应 用 不 同 的 
background-repeat {E (用 逗号 分 隔 不 同 的 值 ) 

background-size 于 指定 背景 图 像 的 尺寸 

一 个 或 两 个 百分数 或 长 度 ， 或 auto， 或 使 用 初始 值 : auto; 不 继承 的 

cover 或 contain 如 果 要 显示 多 重 背 景 图 像 ， 可 以 为 每 个 背景 图 像 应 用 不 同 的 
background-size {E ( 用 去 号 分 隔 不 同 的 值 ) 

border 用 于 定义 元 素 四 边 边框 的 所 有 要 素 

任何 border-width, border-style 值 和 (或 ) 初始 值 取 决 于 单独 的 属性 ; 不 继承 的 








颜色 值 的 组 合 , 或 inherit 






























































border-color 用 于 指定 元 素 的 一 个 或 多 个 边 的 边框 的 颜色 
一 至 四 个 颜色 值 、transparent 或 inherit 初始 值 : 元 素 的 color 属性 ; 不 继承 的 
border-radius 用 于 为 盒 创建 圆 人 


初始 值 : 0; 不 继承 的 





























border-top-right-radius 用 于 为 盒 的 一 个 角 设 置 border-radius {Ñ 




















border-bottom-right-radius 初始 值 : 0; 不 继承 的 
border-bottom-left-radius iE. Firefox 的 旧版 本 使 用 与 此 不 同 的 语法 创建 单独 的 圆 角 : -moz- 
border-top-left-radius border-radius-topright, -moz-border-radius-bottomright, -moz- 


border-radius-bottomleft, -moz-border-radius-topleft 
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( 续 ) 
属性 / 值 描述 和 注释 
border-spacing 用 于 指定 表格 边框 之 间 的 空 际 大 小 
一 个 或 两 个 长 度 , sk inherit 初始 值 : 0; 仅 可 应 用 于 表格 元 素 ; 继承 的 
border-style 用 于 为 元 素 的 一 个 或 多 个 边 设置 边框 样式 
一 至 四 个 以 下 的 值 : none, dotted, dashed, 初始 值 : none; 不 继承 的 
solid, double, groove, ridge, inset, 
outset, inherit 
border-top, border-right, border- 用 于 为 元 素 的 一 个 边 一 次 性 定义 全 部 三 个 边框 属性 
bottom, border-left 初始 值 取决 于 单独 的 值 ; 不 继承 的 
任何 用 于 border-width、border-style 的 单个 
值 和 (或 ) 颜色 值 的 组 合 ,或 使 用 inherit 
border-top-color, border-right-color, 用 于 为 元 素 的 一 个 边 定 义 边 框 颜色 
border-bottom-color border-left-color 初始 值 : color 属性 的 值 ; 不 继承 的 
颜色 值 或 inherit 
border-top-style, border-right-style, 用 于 为 元 素 的 一 个 边 定义 边框 样式 
border-bottom-style, border-left-style 初始 值 : none; 不 继承 的 
none, dotted, dashed, solid, double, 
groove, ridge, inset, outset 或 
inherit 
border-top-width, border-right-width, 用 于 为 元 素 的 一 个 边 定 义 边框 宽度 
border-bottom-width, border-left-width 初始 值 : mdeium; 不 继承 的 
thin, medium, thick 或 长 度 
border-width 用 于 为 元 素 的 一 个 或 四 个 边 定义 边框 宽度 
一 至 四 个 以 下 的 值 : thin, mediun, thick 或 长 度 初始 值 : mdeium; 不 继承 的 
bottom 用 于 设置 元 素 相对 于 其 父 元 素 底部 边缘 的 位 移 大 小 
百分数 、 长 度 、auto 或 inherit 初始 值 : auto; 不 继承 的 ; 百分数 相对 于 包含 块 的 高 度 
box-shadow 用 于 为 盒 添 加 一 个 或 多 个 阴影 。 长 度 值 (依次 ) 表示 相对 于 盒 右 
可 选 的 inset， 接 着 是 二 至 四 个 长 度 值 ， 接 侧 的 位 置 〈 负 数 则 表示 相对 于 盒 左 侧 的 位 置 ) 、 相 对 于 盒 底 部 的 
着 是 颜色 值 位 置 ( 负数 则 表示 相对 于 盒 顶 部 的 位 置 ) 、 模 糊 半径 ( 不 可 为 负数 ) 
和 伸展 距离 ( 负数 会 让 阴影 收缩 ) 。 每 个 box-shadow 值 之 间 用 去 
号 分 隔 
初始 值 : none; 继承 的 
clear 用 于 防止 元 素 包 围 在 浮动 元 素 的 一 边 或 两 边 
none, left, right, both 或 inherit 初始 值 : none; 只 能 应 用 于 块 级 元 素 ; 不 继承 的 
clip 用 于 仅 显 示 元 素 的 一 部 分 
auto, rect 或 inherit 初始 值 : auto; 只 能 应 用 于 绝对 定位 的 元 素 
color 用 于 设置 元 素 的 文本 颜色 
颜色 值 或 inherit 初始 值 : 父 元 素 的 颜色 ; 有 的 颜色 是 由 浏览 器 设置 的 ; 继承 的 
cursor 用 于 设置 指针 的 形状 
auto, crosshair, default, pointer, 初始 值 : auto; 继承 的 


progress, move, e-resize, ne-resize, nw- 
resize, n-resize, se-resize, sw-resize, 
s-resize, w-resize, text, wait, help, 
URL 或 inherit 之 一 
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属性 / 值 


描述 RFN 注 TE 





display 

inline, block, inline-block, list-item, 
run-in, compact, table, inline-table, 
table-row-group, table-header-group, 
table-footer-group, table-row, table- 
column-group, table-column, table-cell, 
table-caption, ruby, ruby-base, ruby- 
text, ruby-base-group, ruby-text-group, 
none, inherit 之 一 




















用 于 确定 元 素 如 何 显 示 ， 以 及 是 否 显示 


初始 值 : 通常 为 inline 或 block; 不 继承 的 





float 
left, right, none, inherit 之 一 














初始 值 : 
承 的 


用 于 确定 元 素 向 父 元 素 的 哪 一 边 浮动 








none; 不 可 应 用 于 定位 过 的 元 素 "或 生成 的 内 容 ; 不 继 





font 
如 果 需 要 ,任何 font-style, font-variant 
和 font-weight 值 的 组 合 ， 接 着 是 必需 的 























font-size、 可 选 的 line-height 值 和 必需 的 























font-family， 或 使 用 inherit 





的 字体 样式 、 


用 于 设置 文本 的 字体 系列 、 
变 体 、 粗 细 和 行 高 

初始 值 取决 于 单独 的 属性 ; 继承 的 ; font-size 和 line-height 可 
使 用 百分数 ; font-size 和 font-family 是 必需 的 ， 和 否则 font 属性 
是 无 效 的 





字体 大 小 (这 二 者 是 必需 的 ) 及 可 选 














font-family 
一 个 或 多 个 由 引号 包 着 的 字体 名 称 ， 接 着 是 
可 选 的 表示 类 属 的 字体 名 称 ， 或 使 用 inherit 









































j 于 为 文本 选择 字体 系列 
初始 值 : 取决 于 浏览 器 ; 继承 的 










































































font-size 用 于 设置 文本 的 大 小 

绝对 大 小 、 相 对 大 小 、 长 度 、 百 分 数 或 初始 值 : medium; 计算 的 值 是 继承 的 ; 百分数 相对 于 父 元 素 的 字 
inherit 体 大 小 

font-style 用 于 将 文本 标记 为 斜体 

normal, italic, oblique 或 inherit 初始 值 : normal; 继承 的 

font-variant 用 于 设置 小 型 大 写字 母 

normal, small-caps 或 inherit 初始 值 : normal; 继承 的 

font-weight 于 应 用 、 移 除 、 调 整 粗 体格 式 

normal, bold, bolder, lighter, 100, 初始 值 : normal; 数字 值 当 做 关键 字 而 非 整 数 进行 处 理 ( 例如 ， 
200、300、400、500、600、700、800、900 ”不 能 使 用 150) ; 继承 的 


或 inherit 











height 


长 度 、 百 分 数 、auto 或 inherit 














用 于 设置 元 素 的 高 度 








v lit: 
外 的 任何 元 素 ; 不 继承 的 


auto; H 





应 用 于 除了 非 蔡 换 行内 元 素 、 表 格 列 和 列 组 以 











eft 





























用 于 设置 元 素 相 对 于 其 父 元 素 左 侧 边缘 的 位 移 大 小 





















































长 度 、 百 分 数 、auto 或 inherit 初始 值 : auto; 只 能 用 于 定位 过 的 元 素 ; 不 继承 的 ; 百分数 相对 
于 包含 块 的 宽度 

etter-spacing ] 于 设置 字母 之 间 的 间隙 大 小 

normal 、 长 度 或 inherit 初始 值 : normal; 继承 的 

















(D 即 设 为 绝对 定位 、 相 对 定位 或 固定 定位 的 元 素 。 一 一 译 者 注 
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(5) 


属性 / 值 描述 和 注释 








line-height 于 设置 文本 行 之 间 的 距离 
normal 、 数 字 、 长 度 、 百 分 数 或 inherit Jf: normal; 继承 的 ; 百分数 相对 于 元 素 自身 的 字体 大 小 





H 


























list-style 用 于 设置 列表 的 标识 ( 常规 的 或 定制 的 ) 及 其 位 置 



























































































































































































































































































































































任何 list-style-type, list-style-position 初始 值 取决 于 单独 元 素 的 初始 值 ; 只 能 应 用 于 列表 元 素 ; 继承 的 

和 (或 ) list-style-image 值 的 组 合 ， 或 使 

用 inherit 

list-style-image 用 于 为 列表 指定 定制 的 标识 

URL, none 或 inherit 初始 值 : none; 只 能 应 用 于 列表 元 素 ; 覆盖 list-style-type; 继 
承 的 

list-style-position 用 于 确定 列表 标识 的 位 置 

inside, outside 或 inherit 初始 值 : outside; 只 能 应 用 于 列表 元 素 ; 继承 的 

list-style-type 用 于 设置 列表 的 标识 

disc, circle, square, decimal, lower- 初始 值 : disc; 只 能 应 用 于 列表 元 素 ; 如 果 list-style-type 是 有 

roman, upper-roman, lower-alpha, upper- 效 的 则 不 使 用 ; 继承 的 

alpha、none 或 inherit 

margin 用 于 设置 元 素 与 其 父 元 素 和 ( 或 ) 同胞 元 素 之 间 在 一 个 或 多 个 边 

一 至 四 个 以 下 的 值 : 长 度 、 百 分 数 、auto 或 上 的 间隔 大 小 

inherit E QUUM width 值 ; 不 继承 的 ; 百分数 相对 于 包含 
块 的 宽 

margin-top, margin-right, margin- 用 于 设置 元 素 与 其 父 元 素 和 (或) 同胞 元 素 之 间 在 一 个 边 上 的 间 

bottom, margin-left 隔 大 小 

长 度 、 百 分 数 、auto 或 inherit 初始 值 : o; 不 继承 的 ; 百分数 相对 于 包含 块 的 宽度 ; 如 果 
width, margin-right 和 margin-left 之 和 大 于 父 元 素 的 包含 块 ， 
则 margin-right fil margin-left 的 值 会 被 覆盖 

max-height, max-width 分 别 用 于 设置 元 素 的 最 大 高 度 和 ( 或 ) 最 大 宽度 

长 度 、 百 分 数 、none 或 inherit 初始 值 : none; 不 能 用 于 行内 元 素 或 表格 元 素 ; 不 继承 的 ; 百 分 
数 相对 于 包含 块 的 高 度 / 宽度 

min-height, max-width 分 别 用 于 设置 元 素 的 最 小 高 度 和 ( 或 ) 最 小 宽度 

长 度 、 百 分 数 或 inherit 初始 值 : none; 不 能 用 于 行内 元 素 或 表格 元 素 ; 不 继承 的 ; HAY 
数 相 对 于 包含 块 的 高 度 / 宽度 

opacity 用 于 让 元 素 半 透明 或 不 可 见 








.0( 表示 完全 透明 ) 至 1.0 ( 表示 完全 不 透 ”初始 值 : 1; 不 继承 的 
明 ) 之 间 的 任何 小 数 

















orphans 用 于 指定 元 素 可 以 单独 出 现在 页 面 底部 的 行 数 
整数 或 inherit 初始 值 : 2; 只 能 用 于 块 级 元 素 ; 继承 的 ; 仅 用 于 打印 媒体 



















































































































































































overflow 用 于 确定 当 内 容 超出 元 素 内 容 区 域 时 额外 的 内 容 如 何 显示 
visible, hidden, scroll, auto 或 inherit 初始 值 : visible; 只 能 用 于 块 级 元 素 和 替换 元 素 ; 不 继承 的 
padding 用 于 指定 元 素 内 容 区 域 和 边框 之 间 在 一 个 或 多 个 边 上 的 距离 
一 至 四 个 长 度 或 百分数 ， 或 使 用 inherit 初始 值 取决 于 浏览 器 ; 不 继承 的 ; 百分数 相对 于 包含 块 的 宽度 
padding-top, padding-right, padding- 用 于 指定 元 素 内 容 区 域 和 边框 之 间 在 一 个 边 上 的 距离 

bottom, padding-left 初始 值 : 0; 不 继承 的 ; 百分数 相对 于 包含 块 的 宽度 




















长 度 、 百 分 数 或 inherit 
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(2E) 
属性 / 值 描述 和 注释 
page-break-after 、page-break-before 用 于 Ee 现 分 页 ， 什 么 时 候 不 应 出 现 
always, avoid, auto, right, left 或 初始 auto; 只 能 用 于 块 级 元 素 ; 不 继承 的 ; 仅 用 于 打印 媒体 
inherit 
page-break-inside 阻止 跨 页 的 元 素 产 生 分 页 
avoid, auto 或 inherit 初始 值 : auto; 只 能 用 于 块 级 元 素 ; 继承 的 ; 仅 用 于 打印 媒体 
position 用 于 确定 元 素 如 何 相对 于 文档 流 进行 定位 
static、relative、absolute、fixed 或 初始 值 ，static; 不 继承 的 
inherit 
right 日 于 设置 元 素 相 对 于 其 父 元 素 右 侧 边缘 的 位 移 大 小 


















































































































































长 度 、 百 分 数 、auto 或 inherit 初始 值 : auto; 只 能 用 于 定位 过 的 元 素 ; 不 继承 的 ; 百分数 相对 
于 包含 块 的 宽度 

table-layout 用 于 选择 确定 单元 格 宽度 的 算法 

fixed, auto 或 inherit 初始 值 ; auto; 不 继承 的 

text-align 于 指定 文本 对 齐 方式 

left, right, center, 、justify、 字 符 串 或 ”初始 值 取决 于 浏览 器 和 书写 方向 ; 只 能 应 用 于 块 级 元 素 ; 继承 的 

inherit 

text-decoration 于 修饰 文本 ( 大 多 数 为 线条 ) 

任何 underline, overline, line-through 和 初始 值 : none; 不 继承 的 

blink 的 组 合 ， 或 none, inherit 

text-indent 于 设置 段落 第 一 行 的 缩 进 量 

长 度 、 百 分 数 或 inherit 初始 值 : o; 只 能 应 上 于 块 级 元 素 ; 继承 的 ; 百分数 相对 于 包含 块 
的 宽度 

text-overflow 用 于 指定 文本 不 可 见 时 处 理 溢出 的 方式 

clip、ellipsis 或 "string" 初始 值 : clip 

















































































































































































































text-shadow 昌 于 为 元 素 的 文本 添加 一 个 或 多 个 阴影 EE (依次 ) a 

两 个 或 四 个 长 度 值 ， 接 着 是 颜色 值 对 于 文本 右 侧 的 位 置 ( te Jis 
对 于 文本 底部 的 位 置 负数 则 表示 相对 于 文本 项 部 的 位 置 ) 、 
WE (不 可 为 负数 ) 和 伸展 距离 (负数 会 让 阴影 收缩 ) 。 M 
text-shadow 值 之 间 用 逗号 分 隔 
初始 值 : none; 继承 的 

text-transform 于 设置 元 素 的 文本 的 大 小 写 

capitalize, uppercase, lowercase, none 初始 值 : none; 继承 的 

或 inherit 

transform 于 对 元 素 进行 形状 、 大 小 或 方向 上 的 变形 

none 或 一 系列 变形 功能 ( matrix, translate, 初始 值 : none; 不 继承 的 ; 变形 功能 按照 它们 所 列 的 顺序 进行 

translateX, translateY, scale, 应 用 

scaleX, scaleY, rotate, skew, skewX, 

skewY ) 

transform-origin 用 于 定义 应 用 于 元 素 

一 个 或 两 个 百分数 或 长 度 (或 一 个 百分数 和 初始 值 : 50% 50%; 不 继承 的 ; 只 能 应 用 于 块 级 元 素 和 行内 元 素 ; 

一 个 长 度 ) ， 或 top、center bottom 之 一 百分数 相对 于 元 素 盒 的 大 小 

(或 ) left, center, right 之 一 
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CER) 
属性 / 值 描述 和 注释 
transition 用 于 为 元 素 定义 变形 效果 
依次 定义 transition-property, transition- 初始 值 取决 于 单独 的 属性 ; 可 应 用 于 所 有 的 元 素 ， 包 括 before 和 
duration、transition-timing-function 和 :after 伪 元 素 ; 值 的 顺序 对 此 属性 很 重要 
transition-delay 的 简 记 法 ( 用 空格 分 隔 ) 
transition-property 用 于 识别 在 应 用 了 变形 的 元 素 上 定义 的 CSS 属性 

































































































































































none, all 或 用 逗号 分 隔 的 一 组 CSS 属性 初始 值 : all; 不 继承 的 ; 可 应 用 于 所 有 的 元 素 ， 包 括 :before 和 
:after 伪 元 素 

transition-duration FE Misco da 的 时 间 

以 秒 或 毫秒 为 单位 的 时 间 值 初始 值 os (0 秒 ) ; 不 继承 的 ; 可 应 用 于 所 有 的 元 素 ， 包 括 
:before 和 :after "xs 

transition-timing-function 昔 述 用 于 变形 计算 过 程 的 中 间 值 的 使 用 方法 

ease, linear, ease-in, ease-out, ease- 初始 值 : ease; 可 应 用 于 所 有 的 元 素 ， 包 括 :before 和 :after [/7C 

in-out, cubic-bezier(number, number, 素 

number, number) 

transition-delay 用 于 定义 变形 开始 的 时 间 

以 秒 或 毫秒 为 单位 的 时 间 值 初始 值 os (0 秒 ) ; 不 继承 的 ; 可 应 用 于 所 有 的 元 素 ， 包 括 








:before 和 :after HICA 
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top 用 于 设置 元 素 相 对 于 其 父 元 素 顶 部 边缘 的 位 移 大 小 

长 度 、 百 分 数 、auto 或 inherit 初始 值 : auto; 只 能 用 于 定位 过 的 元 素 ; 不 继承 的 ; 百分数 相对 
于 包含 块 的 高 度 

vertical-align 用 于 指定 元 素 在 垂直 方向 上 的 对 齐 方式 

baseline, sub, super, top, text-top, 初始 值 : baseline; 不 能 应 用 于 行内 元 素 和 表格 单元 格 元 素 ; 不 

middle 、bottom 、text-bottom、 百 分 数 、 长 继承 的 ; 百分数 相对 | 于 元 素 的 line-height 属性 

度 或 inherit 

visibility 用 于 在 不 将 元 素 移出 文档 流 的 情况 下 让 元 素 不 可 见 

visible, hidden, collapse 或 inherit 初始 值 : inherit， 事 实 上 是 不 继承 的 〈 仍 存 争 议 ) 

white-space 用 于 指定 如 何 处 理 空格 

normal, pre, nowrap, pre-wrap, pre-lined 初始 值 : normal; 只 能 用 于 块 级 元 素 ; 继承 的 

或 inherit 

widows 用 于 指定 元 素 可 以 单独 出 现在 页 面 顶部 的 行 数 

整数 或 inherit 初始 值 : 2; 只 能 用 于 块 级 元 素 ; 继承 的 ; 仅 用 于 打印 媒体 

width 用 于 设置 元 素 的 宽度 

长 度 、 百 分 数 、auto 或 inherit 初始 值 : auto; 不 能 应 用 于 行内 元 素 、 表 格 行 或 行 组 ; 不 继承 的 ; 
百分数 相对 于 包含 块 的 宽度 

word-spacing 用 于 设置 单词 之 间 的 距离 

normal 、 长 度 或 inherit 初始 值 : normal; 继承 的 

z-index 用 于 设置 元 素 相对 于 重 秋 元 素 的 深度 

auto, VE inherit 初始 值 : auto; 只 能 应 用 于 定位 了 的 元 素 ; 不 继承 的 




















K B.1 是 根据 www.w3.org/TR/CSS2 l/propidx.html 提供 
国家 计算 机 科学 与 控制 研究 所 、 日 本 庆 应 义 熟 大 学 


的 完整 规范 制订 的 ， 版 权 











1 万 维 网 联盟 (美国 腑 省 理工 学 院 、 法 








) 所 有 。 保留 所 有 权利 。 
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B.2 CSS 选择 器 和 结合 符 


表 B.2 CSS 选择 器 和 结合 符 



































































































































































































































模 R $ x CSS3 选择 器 类 型 

* 任何 元 素 通用 选择 器 

E 类 型 为 E 的 元 素 类 型 选择 器 

E[foo] dB "foo" 属性 的 E 元素 属性 选择 器 

E[foo-"bar"] "foo" 属性 值 恰 为 "bar" 的 E 元 素 (引号 属性 选择 器 
是 可 选 的 ) 

E[foo ~ ="bar"] "foo" 属性 为 一 组 空格 分 隔 的 值 ， 且 其 中 属性 选择 器 
之 一 恰 为 "bar" 的 E 元 素 ( 引 号 是 可 选 的 ) 

E[foo^="bar"] "foo" 属性 以 "bar" 开头 的 EE 元 素 (引号 是 属性 选择 器 
是 可 选 的 ) 

E[foo$-"bar"] "foo" 属性 以 "bar" 结束 的 E 元 素 (引号 是 BEEE 
是 可 选 的 ) 

E[foo*="bar"] "foo" 属性 值 在 某 人 处 包含 "bar" 的 E 元 素 是 a TEXTES 
(引号 是 可 选 的 ) 

E[foo|="en"] "foo" 属性 为 一 组 连 字 符 分 隔 的 值 且 ( 从 grep 
左边 开始 ) 以 "en" 开头 的 E 元 素 (引号 
是 可 选 的 ) 

E:root E 元 素 ， 文 档 根 元 素 是 结构 伪 类 

E:nth-child(n) E 元 素 ， 其 父 元 素 的 第 n 个 子 元 素 是 结构 伪 类 

E:nth-last-child(n) E 元 素 ， 其 父 元 素 的 倒数 第 n 个 子 元 素 是 结构 伪 类 

E:nth-of-type(n) E 元 素 ， 该 类 型 的 第 n 个 同胞 元 素 是 结构 伪 类 

E:nth-last-of- E 元 素 ， 该 类 型 的 倒数 第 n 个 同胞 元 素 是 结构 伪 类 

type(n) 

E:first-child E 元 素 ， 其 父 元 素 的 第 一 个 子 元 素 结构 伪 类 

E:last-child E 元 素 ， 其 父 元 素 的 最 后 一 个 子 元 素 是 结构 伪 类 

E:first-of-type E 元 素 ， 该 类 型 的 第 一 个 同胞 元 素 是 结构 伪 类 

E:last-of-type E 元 素 ， 该 类 型 的 最 后 一 个 同胞 元 素 是 结构 伪 类 

E:only-child E 元 素 ， 其 父 元 素 的 唯一 子 元 素 是 结构 伪 类 

E:only-of-type E 元 素 ， 该 类 型 的 唯一 同胞 元 素 是 结构 伪 类 

E:empty 没有 子 元 素 ( 含 文本 结 点 ) 的 E 元 素 是 结构 伪 类 

E:link, E:visited 作为 目标 尚未 访问 过 C:link) 或 已 经 访 链接 伪 类 
问 过 ( :visited ) 的 超 链接 的 E 元 素 

E:focus, E:hover, 处 于 特定 用 户 操作 下 的 上 元 素 ] 户 操作 伪 类 

E:active 

E:target 作为 引用 URI 目标 的 E 元 素 是 目标 伪 类 





























E:lang(fr) 语言 为 "fr" EJ :lang() 伪 类 
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CER) 
模 X * X CSS3 选择 器 类 型 
E:disa- 状态 为 有 效 的 或 无 效 的 用 户 界面 E 元 素 是 UI 元 素 状态 伪 类 
e 
E:checked 选中 了 的 用 户 界面 FE 元素 ( 如 单 选 按钮 或 是 UI 元 素 状态 伪 类 
复 选 框 ) 
E::first-line E 元 素 在 格式 上 的 第 一 行 : :first-line 伪 元 素 
E::first-letter E 元 素 在 格式 上 的 第 一 个 字母 ::first-letter 伪 元 素 
E::before E 元 素 之 前 的 生成 内 容 : :before 伪 元 素 
E::after E 元 素 之 后 的 生成 内 容 : :after 伪 元 素 
E.warning 类 为 "warning" 的 EE 元素 类 选择 器 
E#myid ID 等 于 "myid" 的 下 元 素 ID 选择 需 
E:not(s) 与 简单 选择 器 s (例如 input:not(.warning) ) 是 否定 伪 类 
不 匹配 的 E 元 素 
EF 作为 E 元素 后 代 的 F 元 素 后 代 结 合 符 
E»F 作为 上 元 素 子 元 素 的 F 元 素 子 元 素 结合 符 
E«F 紧 接 E 元 素 后 面 的 F 元 素 相 邻 同胞 元 素 结合 符 
E ~ F TET E 元 素 后 面 的 F 元 素 是 通用 同胞 元 素 结合 符 
K B.2 是 根据 www.w3.org/TR/css3-selectors/ 提供 的 CSS3 选择 右 模 型 制订 的 ， 版 权 由 万 维 网 联盟 ( 美国 麻 省 理工 学 院 、 
法 国 国 家 计算 机 科学 与 控制 研究 所 、 日 本 庆 应 义 刻 大 学 ) 所 有 。 保留 所 有 权利 。 


B.3 CSS3 颜色 值 


















































表 B.3 CSS3 颜色 值 




















颜色 值 描述 和 注释 
rgb(red-value, green-value, RGB ( 红 、 绿 、 蓝 ) 颜色 模式 


blue-value) 





nn 0 58] 255 之 间 的 数字 或 





百分数 (不 能 





rgb(0, 0, 0) 和 rgb(0%, 096, 0%) 为 黑色 
rgb(255, 255, 255) 和 rgb(10096, 10096, 10096) 为 


数字 和 











分 数 的 组 合 ) 











ÄH 





(6, 





rgba(red-value, green-value, 
blue-value, alpha) 


RGB 颜色 模式 ， 加 上 alpha 透明 度 


颜色 值 同 RGB 语法 相同 








第 四 个 参数 alpha 是 大 于 等 于 0.0 ( 完全 透明 ) 且 小 于 等 于 1.0 ( 完 












































































































































全 不 透明 ) 的 小 数 

hsl(hue-value, saturation-value, HSL (色相 、 饱 和 度 、 亮 度 ) 颜色 模式 

lightness-value) 色相 值 用 颜色 环 的 角度 (0 至 360 之 间 的 数字 ) 表示 : 0 和 360 
为 红色 ，120 为 绿色 ，240 为 蓝 色 ,位 于 之 间 的 其 他 值 表示 其 他 
颜色 
饱和 度 值 用 百分数 表示 : 0% 为 灰色 ，100% 为 完全 饱和 的 颜色 
亮度 值 用 百分数 表示 : 0% 为 黑色 ，100% 为 白色 ，50% 为 “正常 ” 

hsla(hue-value, saturation-value, HSL 颜色 模式 ， 加 上 alpha 透明 度 

lightness-value, alpha) 颜色 值 同 HSL 语法 相同 
第 四 个 参数 alpha 是 大 于 等 于 0.0 ( 完全 透明 ) 且 小 于 等 于 1.0 ( 完 
全 不 透明 ) 的 小 数 
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B.4 CSS3 渐变 
CSS3 提供 两 种 渐变 样式 





linear-gradient ( 线性 渐变 ) 和 radial-gradient ( 径 向 渐变 ) 。 它 
们 可 以 作为 background 和 background-image 属性 的 值 。 





表 B.4 CSS3 渐变 























渐变 样式 ” 值 注 释 
linear-gradient([origin,] origin 指定 盒 的 角 ， 可 以 是 top, 在 默认 情况 下 ， 线 性 渐变 从 盒 的 顶 
color [stop], color [stop] [, left, bottom, right 和 center 关键 端 中 间 部 分 开始 
color [stop]]*) 字 的 组 合 或 相对 于 盒 尺 寸 的 百分数 在 默认 情况 下 ， 浏 览 器 会 尝试 在 整 
例如 : 值 (从 左上 角 开 始 ) d ORE 
linear-gradient(bottom 第 一 个 颜色 值 表示 渐变 开始 的 颜色 如 果 仅 指定 两 种 颜色 ， 则 默认 的 起 
left, #fff, #f00 3096, #000) fH, a 吉 束 的 始 位 置 为 0% 和 100% 















































产生 一 个 从 盒 的 左下 角 向 右上 角 过 BIER. 可 以 在 渐变 中 指定 任意 数 
渡 的 渐变 ; MR 在 渐变 路 。” 量 的 颜色 值 
径 30% 处 变 为 红色 ， 最 后 变 为 黑色 stop 指定 颜色 在 渐变 中 的 位 置 ， 











以 是 长 度 或 相对 于 整个 渐变 长 度 的 
百分数 





radial-gradient([origin,] 
[shape-or-size-or-both,] 
color [stop], color [stop] [, 
color [stop]]*) 

例如 : 

radial-gradient(3096 3096, 
circle closest-corner, #fff, 
#000) 

产生 一 个 从 距 盒 的 左上 多 
处 开始 ， 以 圆 形 向 周围 辐射 ， 直 到 
到 达 最 近 的 角 为 止 的 渐变 ; 以 白色 
开始 ( 在 圆圈 的 中 心 ) ， 以 黑色 结 
R (在 外 边缘 ) 
















































































origin 指定 盒 的 角 ， 可 以 是 top, 
left, bottom, right 和 center 关键 
字 的 组 合 或 相对 于 盒 尺 寸 的 百分数 
值 (从 左上 角 开 始 ) 
shape 在 默认 情况 下 为 circle 或 
ellipse， 这 种 形状 会 按照 盒 的 大 小 
进行 填充 (因此 ， 当 盒 为 矩形 时 ， 
则 使 用 椭圆 形 ， 当 盒 为 方形 时 使 用 
圆 形 ) 

size 可 以 为 以 下 关键 字 : closest- 
side, closest-corner, farthest-side 、 
farthest-corner, contain, cover 
size 还 可 以 使 用 长 度 值 显 式 地 设置 
径 疝 渐变 的 尺寸 ( 如 果 想 分 别 设置 
P ERE 可 以 使 用 两 
个 长 度 值 ) 
第 一 个 颜色 值 表示 渐变 开始 的 颜色 
值 ， 可 以 在 渐变 中 指定 任意 数量 的 
颜色 值 
stop 指定 颜色 在 渐变 中 的 位 置 ， 可 
以 是 长 度 或 相对 于 整个 渐变 长 度 的 
百分数 



























































































































































在 默认 情况 下 ， 径 向 渐变 从 盒 的 中 
心 开始 

在 默认 情况 下 ，size 关键 字 会 被 设 
为 contain 

在 默认 情况 下 ， 浏 览 器 会 尝试 在 整 
个 渐变 中 均匀 地 分 布 颜色 

如 果 仅 指定 两 种 颜色 ， 则 默认 的 起 
始 位 置 为 0% 和 100% 








* WebKit ( Chrome 和 Safari 所 用 的 泻 染 引擎 ) 的 早期 版 本 使 用 的 渐变 语法 与 此 并 不 相同 。 关 于 该 语法 更 多 信息 参见 
www.webkit.org/blog/1424/css3-gradients/。 
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B.5 媒体 查询 


RBS 媒体 查询 







































































































































































































































































特 性 描述 和 注释 
width, 输出 设备 的 目标 显示 区 域 的 宽度 、 最 小 宽度 或 最 大 宽度 
min-width 、 应 用 : 可 视 媒 体 和 触觉 媒体 
max-width 
长 度 
height, 输出 设备 的 目标 显示 区 域 的 高 度 、 最 小 高 度 或 最 大 高 度 
min-height , 应 用 : 可 视 媒 体 和 触觉 媒体 
max-height 
长 度 
device-width, 输出 设备 的 呈现 表面 的 宽度 、 最 小 宽度 或 最 大 宽度 
min-device-width 、 应 用 : 可 视 媒 体 和 触觉 媒体 
max-device-width 
长 度 
device-height, 输出 设备 的 呈现 表面 的 高 度 、 最 小 高 度 或 最 大 高 度 
min-device-height, 应 用 : 可 视 媒体 和 触觉 媒体 
max-device-height 
长 度 
orientation 当 height 特性 值 大 于 或 等 于 width 特性 值 时 ， 方 向 为 portrait; 
portrait 或 landscape 否则 为 landscape 
应 用 : 位 图 媒体 
aspect-ratio, width 特性 值 与 height 特性 值 的 比例 、 最 小 比例 或 最 大 比例 
min-aspect-Tatio、 应 用 : 位 图 媒体 
max-aspect-ratio 
比例 (如 4/3 或 16/9 ) 
device-aspect-ratio, device-width 特性 值 与 device-height 特性 值 的 比例 、 最 小 比例 或 
min-device-aspect-ratio, 最 大 比例 
max-device-aspect-ratio 应 用 : 位 图 媒体 
比例 (如 4/3 或 16/9 ) 
color, 输出 设备 每 种 颜色 的 位 数 、 最 小 位 数 或 最 大 位 数 ; 如 果 设 备 不 是 
min-color、 彩色 的 设备 ， 则 值 为 0 
max-color 应 用 : 可 视 媒体 
整数 
color-index、 输出 设备 颜色 查询 表 中 项 目的 数量 、 最 小 数量 或 最 大 数量 ; 如 果 
min-color-index、 设备 不 使 用 颜色 查询 表 ， 则 值 为 0 
max-color-index 应 用 : 可 视 媒体 
整数 
monochrome 、 在 单 色 帧 缓冲 中 每 像素 的 位 数 、 最 小 位 数 或 最 大 位 数 ， 如 果 设 备 
min-monochrome 、 不 是 单 色 的 设备 ， 则 值 为 0 
max-monochrome 应 用 : 可 视 媒 体 
整数 
resolution, 输出 设备 的 分 辨 率 、 最 小 分 辨 率 或 最 大 分 辨 率 C 即 像素 密度 ) ; 
min-resolution, resolution (不 是 min-resolution 或 max-resolution ) 不 会 检测 使 
max-resolution 用 非 方形 像素 的 设备 











分 辨 率 (如 300dpi 或 118dpcnm ) 
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CAE) 
T 性 描述 和 注释 

scan 电视 输出 设备 的 扫描 过 程 
progressive 或 interlace 应 用 : 电视 媒体 
grid 设备 是 基于 栅 格 的 还 是 基于 位 图 的 ; 如 果 输 出 设备 是 基于 栅 格 的 
0 或 1 (如 TTY 终端 ) 则 值 为 1， 否 则 值 为 0; 这 种 媒体 查询 也 可 以 使 

日 不 带 值 的 形式 表示 ( 例如 @media grid) 

应 用 : 可 视 媒体 和 触觉 媒体 

[mm 
B.6 CSS FIRRA 
表 B.6 CSS 字体 能 入 〈@font-face) 
语 法 描述 和 注释 

@font-face { 开始 样式 规则 
font-family: "name of font"; 定义 字体 系列 ， 可 以 用 做 font-family 属性 引用 的 值 
src: url("path/to/font.ext") 识别 字体 的 源 文 件 ;指定 多 个 源 文 件 时 ， 使 用 逗号 分 隔 各 个 值 
format ("format-type"); 对 于 .eot 文件 ， 格 式 应 为 embedded-opentype; 对 于 .wo 人 文件 ， 格 

式 应 为 woff; 对 于 .ttf 文 件 ， 格 式 应 为 truetype; 对 于 .svg 文件 ， 

格式 应 为 svg 
font-style: value; FERMA TFF, MEHE font-style 属性 相同 的 语法 
font-weight: value; 指定 圣 入 的 字体 的 粗细 ， 使 用 与 font-weight 属性 相同 的 语法 





} 结束 样式 规则 


C 25 ) 延伸 阅读 (SR 


* JavaScript 高 级 程序 设计 ( 第 3 版 ) 
978-7-115-27579-0，99.00 


令 HTML5 程 序 设计 ( 第 2 版 ) 
978-7-115-27871-5，59.00 


€ 响应 式 Web 设 计 : HTML5 和 CSS3 实 战 
978-7-115-29922-2，49.00 


令 HTML5 秘 籍 
978-7-115-29018-2，79.00 


HTML5 实 战 
978-7-115-29752-5, 59.00 


* HTML5 与 CSS3 设 计 模 式 
978-7-115-29992-5, 89.00 


+ HTML5 和 CSS3 实 例 教程 
978-7-115-26724-5, 39.00 


+ 深入 HTML5 应 用 开发 
978-7-115-27494-6, 59.00 


€ HTML5 Canvas 基 础 教程 
978-7-115-27101-3, 49.00 


$ HTML5 游 戏 开 发 
978-7-115-26363-6，49.00 


+ 论 道 HTML5 
978-7-115-27870-8, 69.00 


+ 精通 CSS: 高 级 Web 标 准 解决 方案 ( 第 2 版 ) 
978-7-115-22673-0，49.00 


+ CSS3 实 用 指南 
978-7-115-27378-9，49.00 


4 精彩 绝伦 的 CSS 
978-7-115-28479-2，49.00 


“我 们 这 些 有 过 不 少 实际 经 验 的 设计 师 往往 想当然 地 认为 自己 什么 都 知道 ， 事 实 并 非 如 此 。 本 书 告诉 我 们 ， 我 们 知道 的 很 多 东西 
其 实 都 是 错 的 。 所 有 Web 设 计 师 都 需要 看 看 这 本 书 。?” 
一 一 Web 标 准 计划 创始 人 Jeffrey Zeldman 对 本 书 上 一 版 的 评论 


"Elizabeth Castro 宝 刀 不 老 ， 而 新 作者 Bruce Hyslop 亦 为 本 书 增色 不 少 。 这 本 书 既 系统 全 面 地 讲解 了 基础 知识 ， 又 能 让 读者 快速 
吸纳 HTML5 和 CSS3 的 绝 大 部 分 新 特性 ， 是 一 本 值得 拥有 的 好 书 ! ” 


一 一 Web Teacher 评 论 


“快速 入 门 和 轻松 写 代 码 是 这 本 书 的 最 大 特色 ， 如 果 你 不 想 浪费 时 间 ， 而 又 想 扎 实地 学 习 HTML5 和 CSS3， 那 就 选 这 本 书 吧 ! ” 
一 一 巴 诺 书店 评论 


“本 书 可 谓 字 字 珠 现 ， 我 入 门 时 就 是 拿 它 当 引路 人 的 。” 





亚马逊 评论 


代表 下 一 代 网 页 编写 技术 的 HTML5， 为 网 页 提供 布局 和 格式 的 CSS3， 这 两 者 构成 了 Web 开 发 的 基石 ， 也 是 Web 程 序 
员 和 设计 师 必 须 熟 练 掌握 的 最 基本 技能 。 

本 书 是 风靡 全 球 的 HTML 和 CSS 最 佳 入 门 教程 的 最 新 版 ， 上 一 版 单单 英文 版 的 销量 就 超过 100 万 册 ， 被 翻译 为 十 多 种 语 
言 ， 并 长 期 雄 路 亚马逊 书店 计算 机 图 书 排行 榜 榜 首 。 

最 新 的 第 7 版 秉承 前 一 版 直观 、 透 彻 、 全 面 、 循 序 渐进 的 讲授 特色 ， 仍 然 采用 独特 的 双 栏 图 文 并 排 方式 ， 手 把 手指 导 
读者 从 零 开 始 轻松 入 门 。 在 内 容 上 ， 第 7 版 是 一 个 重大 的 修订 版 本 ， 全 面 反 映 了 HTML5 和 CSS3 的 最 新 特色 ， 让 读者 对 网 站 
设计 领域 振奋 人 心 的 进展 感同身受 。 书 中 主要 内 容 包 括 : 如 何 创建 HTML5 页 面 ， 如 何 使 用 HTML5 元 素 ， 如 何 用 CSS3 为 网 
页 添加 样式 ， 如 何 向 页 面 添加 JavaScript 代 码 ， 如 何 测试 做 好 的 页 面 并 将 其 上 传 到 万 维 网 。 另 外 ， 书 中 还 强调 了 渐进 增强 
这 种 网 站 设计 方法 的 重要 性 ， 并 将 其 贯穿 在 全 书 的 具体 实践 中 。 

作者 专 为 本 书 设 计 了 内 容 丰 富 的 配套 网 站 http://www.bruceontheloose.com/htmlcss/， 提 供 书 中 全 部 示例 的 完整 版 本 、 
勘误 以 及 大 量 附 加 材料 。 
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最 前 沿 的 上 T 类 电子 书 发 售 平台 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 犹 
豫 仿 香 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行动 拥抱 这 个 
出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 
版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 DRM-free 的 阅读 
体验 : 在 线 阅读 和 PDF。 











相 比 纸 质 书 ， 电 子 书 具 有 许多 明显 的 优势 。 它 不 仅 发 
布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 片 (即使 
有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进 
行 搜 索 、 剪 贴 、 复 制 和 打印 。 








最 方便 的 开放 出 版 平台 


图 灵 社 区 向 读者 开放 在 线 写作 功能 ， 协 助 你 实现 自 出 
版 和 开源 出 版 的 梦想 。 利 用 “合集 ”功能 ， 你 就 能 联 
合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 
的 形式 提供 给 读者 。 (收费 形式 须 经 过 图 灵 社 区 立项 
评审 。) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 
的 意愿 ， 图 灵 社 区 就 能 帮助 你 实现 这 个 梦想 。 成 熟 的 
书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 








图 灵 社 区 引进 出 版 的 外 文 图 书 ， 都 将 在 立项 后 马上 在 
社区 公布 。 如 果 你 有 意 翻译 哪 本 图 书 ， 欢 迎 你 来 社区 
申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 
译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 翻译 工作 ， 是 
需要 有 坚强 的 效力 的 。 














欢迎 加 入 


图 灵 社 区 


图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 
紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 网 上 
审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模 
式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 以 较 
快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 
往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 同 时 ， 敏 
捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 
提前 消灭 书稿 中 的 错误 ,最 大 程度 地 保证 图 书 出 版 


的 Ji Hio 





最 直接 的 读者 交流 平台 


在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 
误 、 发 表 评论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 员 和 
其 他 读者 进行 交流 互动 。 提 交 勘 误 还 能 够 获 赠 社区 
银子 。 


你 可 以 积极 参与 社区 经 常 开展 的 访谈 、 审 读 、 评 选 
等 多 种 活动 ， 启 取 积分 和 银子 ， 积 累 个 人 声望 。 


ituring.com.cn 


